Grids

Tailwind has a full compliment of classes to help you manage your grid layouts.

Grid Template Columns

• grid-cols(-AMT)
  • AMT
    
    1 2 3 4 5 6
7 8 9 10 11 12

none

Docs Try it

You can control up to a 12 columns using grid containers. using grid-cols, you add an amount from 1 to 12 or they keyword none.

Remember that you can use these with responsive variants to control how they are displayed depending on the size of the viewport.

Gap

• gap(-DIR)(-SIZ)
  • DIR
    x y
  • SIZ
    
    0 0.5 1 1.5 2 2.5 3 3.5 4 5

6 7 8 9 10 11 12 14 16 20

24 28 32 36 40 44 48 52 56

60 64 72 80 96
px

Docs Try it

Gaps are how you place spacing inside rows and columns and you can specify an optional direction here so you can have a different horizontal and vertical gaps, plus the traditional size scale from 0 to 96, plus px, which is the same as one pixel.

Grid Template Columns

• col(-TYP)(-AMT)
  • TYP
    
    auto span start end
  • AMT
    
    1 2 3 4 5 6

7 8 9 10 11 12

full

Docs Try it

When working with columns, you can also control how many columns each element takes.

The types can be auto, which lets the browser decide, then span, which lets you spacify a number of columns the element takes up.

start and end are pretty interesting because they let you pick the grid lines where the elements start and ends. Now, the grid lines start at 1 so the numbering is a little weird.

Definitely better to look at these in context.

In the example, you'll notice that sometimes, you can't use the width of items because it can affect the spanning.

Also that when you use end, you have to go one column past where you think you'd go.

Grid Template Rows

• grid-rows(-AMT)
  • AMT
    
    1 2 3 4 5 6

none

Docs Try it

You can set up your grid so that it lets you control the amount of rows instead of columns, but the setup is a bit different, so the example here will help.

In the example, you can see that I've set this up with the grid-flow-col class, so that the columns flow up and down and then use the grid-rows class to control how many columns these display in.

Grid Row Start/End

• col(-TYP)(-AMT)
  • TYP
    
    auto span start end
  • AMT
    
    1 2 3 4 5 6 7

full

Docs Try it

These classes are similar to what we do with rows, but because there are only six columns, there are only seven numbers. Remember that the grid lines start at one and the last one would be seven.

In the example just like with rows you can see that sometimes you ahve to turn off the height in this case to properly adjust the spanning.

Grid Auto Flow

grid-flow-row grid-flow-col grid-flow-row-dense grid-flow-col-dense

Docs Try it

There's a few classes that let you change how items are placed on the grid. The key things is that the dense option allows the grid to fit the content.

This is just the type of thing that is best seen as an example. Take a look what what's happening here with the fifth element starting at a later space. Using grid-flow-row will leave a hole in the layout, but with the dense option the sixth element will fill the spot.

This can help build a better layout.

Grid Auto Columns

auto-cols-auto auto-cols-min auto-cols-max auto-cols-fr

Docs Try it

There's a few classes that let you control what happens when there are too many items for the slots you've specified on a grid.

So if say nine items will fit on your specified grid slots, but you have 12, the browser lets you control how those extra items are displayed.

This is definitely better with an example, so take a peek.

You'll see that I have the aforementioned example where where I have a 3x3 grid where I'm forcing a column flow with grid-flow-col. When I do this, the order of the columns go from top left down.

Notice the last column. It's shorter than the other ones. Because it doesn't fit on my speficied grid, it's sized differently.

I'm specifying auto-cols-min, so the min is saying to use the smallest piece of content that will fit as the width. In this case, that's the word automation.

If I switch this to auto-cols-max, it will try to fit ALL of the content in the box. Switch it to auto-cols-auto and it will let the browser decide, which again, tries to fit everything it can.

Finally, if you choose auto-cols-fr, the width will match the width of the other elements.

Grid Auto Rows

auto-rows-auto auto-rows-min auto-rows-max auto-rows-fr

Docs Try it

Grid Auto Rows is pretty similar to columns, but of course it works with rows instead. If you look at the example though, you'll see that using auto-rows-fr works well, but the other values are pretty similar.

That's because the making something the minimum height of an element doesn't make as much sense.