Grid

The Grid is a twelve-column, flexbox-based layout system recreated with Tailwind utilities. It provides a familiar row and column structure for building responsive designs.

Basic example

The Grid uses containers, rows, and columns to create responsive layouts. It is built with flexbox and adapts to different screen sizes.

Column

HTML

<div class='container text-center'>
  <div class='row'>
    <div class='col'>Column</div>
    <div class='col'>Column</div>
    <div class='col'>Column</div>
  </div>
</div>

Auto-layout columns

Use breakpoint-specific column classes for easy sizing of columns without adding explicit numbered classes like .col-sm-6.

Equal-width

Use the .col class to create equal-width columns for every screen size.

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">1 of 2</div>
    <div class="col">2 of 2</div>
  </div>
  <div class="row">
    <div class="col">1 of 3</div>
    <div class="col">2 of 3</div>
    <div class="col">3 of 3</div>
  </div>
</div>

Variable width content

Use the .col-auto class to size columns based on the natural width of their content.

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

HTML

<div class='container text-center'>
  <div class='row md:justify-center mb-3'>
    <div class='col lg:col-2'>1 of 3</div>
    <div class='md:col-auto'>Variable width content</div>
    <div class='col lg:col-2'>3 of 3</div>
  </div>
  <div class='row'>
    <div class='col'>1 of 3</div>
    <div class='md:col-auto'>Variable width content</div>
    <div class='col lg:col-2'>3 of 3</div>
  </div>
</div>

Responsive classes

Use responsive column classes to specify different column sizes for different screen sizes. Breakpoints are defined using minimum widths, meaning each one applies from that width upward. However, they can also be set with specific ranges based on project needs and preferences, in which case they’ll only apply within that range. For example, .md:col-4 applies to medium devices (tablets) and above.

All breakpoints

For grids that are the same across all breakpoints, use the .col and .col-{size} classes.

col

col-8

col-4

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

Mix and match

Mix and match different breakpoint-specific column classes for different screen sizes.

.md:col-8

.col-6 .md:col-4

.col-6

HTML

<div class="container text-center">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="md:col-8">.md:col-8</div>
  <div class="col-6 md:col-4">.col-6 .md:col-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 md:col-4">.col-6 .md:col-4</div>
  <div class="col-6 md:col-4">.col-6 .md:col-4</div>
  <div class="col-6 md:col-4">.col-6 .md:col-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>
</div>

Row columns

Instead of specifying the number of columns per row, use the .row-cols-{number} classes to specify the number of columns per row. The grid will automatically lay out the columns evenly. .row-cols-auto can be used to set the number of columns based on the content.

Column

HTML

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

HTML

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

HTML

<div class="container text-center">
  <div class="row row-cols-1 sm:row-cols-2 md:row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Nesting

Nesting is easy with the Grid. Just add a new .row and set of .col within an existing .col. This gives more control over the layout of the content.

Level 1: .sm:col-3

Level 2: .col-8 .sm:col-6

Level 2: .col-4 .sm:col-6

HTML

<div class="container text-center">
  <div class="row">
    <div class="sm:col-3">Level 1: .sm:col-3</div>
    <div class="sm:col-9">
      <div class="row">
        <div class="col-8 sm:col-6">Level 2: .col-8 .sm:col-6</div>
        <div class="col-4 sm:col-6">Level 2: .col-4 .sm:col-6</div>
      </div>
    </div>
  </div>
</div>

Columns

Modify columns with options for alignment, ordering, and offsetting using the flexbox grid system. Column classes can also be used to control the width of non-grid elements.

Vertical alignment

Use the .items-start, .items-center, and .items-end classes to control vertical alignment.

One of three columns

HTML

<div class="container text-center">
  <div class="row items-start">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
</div>

Use the .self-start, .self-center, and .self-end classes to control vertical alignment of individual columns.

One of three columns

HTML

<div class="container text-center">
  <div class="row">
    <div class="col self-start">One of three columns</div>
    <div class="col self-center">One of three columns</div>
    <div class="col self-end">One of three columns</div>
  </div>
</div>

Horizontal alignment

Apply the .justify-* classes to control horizontal alignment.

One of two columns

HTML

<div class="container text-center">
  <div class="row justify-start">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-center">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
  <div class="row justify-end">
    <div class="col-4">One of two columns</div>
    <div class="col-4">One of two columns</div>
  </div>
</div>

Order classes

Use .order-{number} classes to change the order of columns.

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

HTML

<div class="container text-center">
  <div class="row">
    <div class="col">First in DOM, no order applied</div>
    <div class="col order-5">Second in DOM, with a larger order</div>
    <div class="col order-1">Third in DOM, with an order of 1</div>
  </div>
</div>

Offsetting columns

Grid columns can be offset in two ways: using responsive .offset-{size} grid classes or margin utilities. Grid classes provide offsets that match column sizes, while margin utilities are useful for flexible layouts where the offset width is variable.

Offset classes

Use .offset-{number} classes to move columns to the right. For example, .md:offset-4 moves a column over four columns on medium screens and larger.

.md:col-4

.md:col-4 .md:offset-4

.md:col-3 .md:offset-3

.md:col-6 .md:offset-3

HTML

<div class="container text-center">
  <div class="row">
    <div class="md:col-4">.md:col-4</div>
    <div class="md:col-4 md:offset-4">.md:col-4 .md:offset-4</div>
  </div>
  <div class="row">
    <div class="md:col-3 md:offset-3">.md:col-3 .md:offset-3</div>
    <div class="md:col-3 md:offset-3">.md:col-3 .md:offset-3</div>
  </div>
  <div class="row">
    <div class="md:col-6 md:offset-3">.md:col-6 .md:offset-3</div>
  </div>
</div>

Gutters

Gutters are the spaces between columns in the Grid system, used to create consistent spacing and alignment.

Horizontal gutters

Use the .gx-{size} classes to set horizontal gutters between columns.

Custom column padding

HTML

<div class="container text-center overflow-hidden">
  <div class="row gx-12">
    <div class="col">
      <div>Custom column padding</div>
    </div>
    <div class="col">
      <div>Custom column padding</div>
    </div>
  </div>
</div>

Vertical gutters

Use the .gy-{size} classes to set vertical gutters between rows.

Custom column padding

HTML

<div class="container text-center">
  <div class="row gy-12">
    <div class="col-6">
      <div>Custom column padding</div>
    </div>
    <div class="col-6">
      <div>Custom column padding</div>
    </div>
    <div class="col-6">
      <div>Custom column padding</div>
    </div>
    <div class="col-6">
      <div>Custom column padding</div>
    </div>
  </div>
</div>

Horizontal & vertical gutters

Use the .g-{size} classes to set both horizontal and vertical gutters.

Custom column padding

HTML

<div class="container text-center">
  <div class="row g-3">
    <div class="col-6">
      <div>Custom column padding</div>
    </div>
    <div class="col-6">
      <div>Custom column padding</div>
    </div>
    <div class="col-6">
      <div>Custom column padding</div>
    </div>
    <div class="col-6">
      <div>Custom column padding</div>
    </div>
  </div>
</div>

Row columns gutters

Gutter classes can be combined with .row-cols-{number} classes to create gutters between rows and columns.

Row column

HTML

<div class="container text-center">
  <div class="row row-cols-2 lg:row-cols-3 g-3">
    <div class="col">
      <div>Row column</div>
    </div>
    <div class="col">
      <div>Row column</div>
    </div>
    <div class="col">
      <div>Row column</div>
    </div>
    <div class="col">
      <div>Row column</div>
    </div>
    <div class="col">
      <div>Row column</div>
    </div>
    <div class="col">
      <div>Row column</div>
    </div>
  </div>
</div>

No gutters

Apply the .g-0 class to remove all gutters between rows and columns. This removes the padding from the immediate children .col-{size} and negative margins from .row.

.md:col-6 .md:col-8

.col-6 .md:col-4

HTML

<div class="row g-0 text-center">
  <div class="md:col-6 md:col-8">.md:col-6 .md:col-8</div>
  <div class="col-6 md:col-4">.col-6 .md:col-4</div>
</div>

CSS variables

The Grid uses CSS variables for easy customization. Override these variables in the CSS to change the grid’s behavior.

--grid-gutter-x: 1.5rem;
--grid-gutter-y: 0px;
--grid-columns: 12;
--grid-row-columns: 6;

Columns

Typography

Getting Started

Customize

Layout & content

Forms

Advanced Forms

Components

Grid

Basic example

Auto-layout columns

Equal-width

Variable width content

Responsive classes

All breakpoints

Mix and match

Row columns

Nesting

Columns

Vertical alignment

Horizontal alignment

Order classes

Offsetting columns

Offset classes

Gutters

Horizontal gutters

Vertical gutters

Horizontal & vertical gutters

Row columns gutters

No gutters

CSS variables