1. Layout
  2. Grid

Layout

Tailwind CSS Grid

Use the powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system and dozens of predefined classes.

Grid Template Columns

Specifying the columns in a grid

Use the grid-cols-{n} utilities to create grids with n equally sized columns.

01
02
03
04
05
06
07
08
09
                
                  <div class="grid grid-cols-4 gap-4">
                    <div>01</div>
                    <!-- ... -->
                    <div>09</div>
                  </div>
                
              

See the Grid Template Columns for a complete list of grid options.

Grid Column Start / End

Spanning columns

Use the col-span-{n} utilities to make an element span n columns.

01
02
03
04
05
06
07
                
                  <div class="grid grid-cols-3 gap-4">
                    <div class="...">01</div>
                    <div class="...">02</div>
                    <div class="...">03</div>
                    <div class="col-span-2 ...">04</div>
                    <div class="...">05</div>
                    <div class="...">06</div>
                    <div class="col-span-2 ...">07</div>
                  </div>
                
              

Starting and ending lines

Use the col-start-{n} and col-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the col-span-{n} utilities to span a specific number of columns.

Note that CSS grid lines start at 1, not 0, so a full-width element in a 6-column grid would start at line 1 and end at line 7.

01
02
03
04
                
                  <div class="grid grid-cols-6 gap-4">
                    <div class="col-start-2 col-span-4 ...">01</div>
                    <div class="col-start-1 col-end-3 ...">02</div>
                    <div class="col-end-7 col-span-2 ...">03</div>
                    <div class="col-start-1 col-end-7 ...">04</div>
                  </div>
                
              

Equal width

Every column width same size example.

Column
Column
Column
                
                  <div class="grid grid-cols-12 gap-4">
                    <div class="col-span-4">Column</div>
                    <div class="col-span-4">Column</div>
                    <div class="col-span-4">Column</div>
                  </div>
                
              

See the Grid Column Start / End for a complete list of grid options.

Grid Template Rows

Specifying the rows in a grid

Use the grid-rows-{n} utilities to create grids with n equally sized rows.

01
02
03
04
05
06
07
08
09
                
                  <div class="grid grid-rows-4 grid-flow-col gap-4">
                    <div>01</div>
                    <!-- ... -->
                    <div>09</div>
                  </div>
                
              

See the Grid Template Rows for a complete list of grid options.

Grid Row Start / End

Spanning rows

Use the row-span-{n} utilities to make an element span n rows.

01
02
03
                
                  <div class="grid grid-rows-3 grid-flow-col gap-4">
                    <div class="row-span-3 ...">01</div>
                    <div class="col-span-2 ...">02</div>
                    <div class="row-span-2 col-span-2 ...">03</div>
                  </div>
                
              

Starting and ending lines

Use the row-start-{n} and row-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the row-span-{n} utilities to span a specific number of rows.

Note that CSS grid lines start at 1, not 0, so a full-height element in a 3-row grid would start at line 1 and end at line 4.

01
02
03
                
                  <div class="grid grid-rows-3 grid-flow-col gap-4">
                    <div class="row-start-2 row-span-2 ...">01</div>
                    <div class="row-end-3 row-span-2 ...">02</div>
                    <div class="row-start-1 row-end-4 ...">03</div>
                  </div>
                
              

See the Grid Row Start / End for a complete list of grid options.

Grid Auto Flow

Controlling grid element placement

Use the grid-flow-{keyword} utilities to control how the auto-placement algorithm works for a grid layout.

01
02
03
04
05
                
                  <div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...">
                    <div class="col-span-2">01</div>
                    <div class="col-span-2">02</div>
                    <div>03</div>
                    <div>04</div>
                    <div>05</div>
                  </div>
                
              

See the Grid Auto Flow for a complete list of grid options.

Gap

Setting the gap between elements

Use gap-{size} to change the gap between both rows and columns in grid and flexbox layouts.

01
02
03
04
                
                  <div class="grid gap-4 grid-cols-2">
                    <div>01</div>
                    <div>02</div>
                    <div>03</div>
                    <div>04</div>
                  </div>
                
              

Changing row and column gaps independently

Use gap-x-{size} and gap-y-{size} to change the gap between rows and columns independently.

01
02
03
04
05
06
                
                  <div class="grid gap-x-8 gap-y-4 grid-cols-3">
                    <div>01</div>
                    <div>02</div>
                    <div>03</div>
                    <div>04</div>
                    <div>05</div>
                    <div>06</div>
                  </div>
                
              

See the Gap for a complete list of grid options.