Grids

One of the great innovations of the first round of CSS frameworks was support for a grid layout, where we could easily place things on a 12-column grid. The existence of grid spacing made the page layout much easier. Over time, the frameworks became even more flexible, and eventually, grid support was built directly into CSS.

Grid layout

Grids are still great for many layout choices, and Tailwind offers useful utilities for setting up a grid layout using the CSS grid properties. First, there is .grid, a utility for the CSS property display: grid. We need the .grid utility as part of the class list at the top level of our grid, above the individual elements of the grid.

Once we have created a grid element, we can use Tailwind to specify the number of rows or columns in that grid. We can also adjust the behavior of individual elements in the grid. We can define a start or endpoint for an element in the grid, specify the span of rows or columns the element takes up, or change the spacing of each element inside the grid.

The most common use of a grid is to separate the page into a series of columns, which we can do in Tailwind with the .grid-cols-{count} helpers. These go from .grid-cols-1 to .grid-cols-12, each of which separates the page into that many columns. The reset out of grid-land is .grid-cols-none.

Unlike other CSS grid frameworks, we do not need to explicitly specify a row. Inside a grid, CSS will allow autofill down to the next row based on the number of columns we declare.

For example, we can use the following:

We create a 2x2 grid in the following playground with A and B in the top row and C and D in the bottom row:

Feature of CSS grids

A cool feature of CSS grids that is hard to do in some of the other CSS frameworks is using a 90-degree twist by specifying the number of rows. In Tailwind, this is done with the .grid-rows-{count} helper, which can have a suffix of 1 through 12 or no suffix at all.

We can also specify the direction in which data flows through the grid. As we saw in the earlier example, the default .grid-flow-row causes elements inside the grid to flow horizontally in rows. This is the normal behavior of DOM elements that we are probably familiar with.

We can also use .grid-flow-col, in which case elements in the grid fill vertically column by column, like so:

The code below will give us a 2x2 grid, where A and B are in the left column, while C and D are in the right column:

As we can see in the previous examples, we can add a gap between table cells with the conveniently named .gap-{size} helper. This helper takes a suffix that’s the size of the gap, using the same 0 to 96 px measurement scheme we saw for padding and margins. If we want the gap to only be horizontal, we can use .gap-x-{size}. If we want the gap to only be vertical, we use .gap-y-{size}.

Try it out

Create the grid with the following attributes:

• grid-row-3
• grid-flow-col
• text-base
• w-¼
• gap-y-10
• gap-x-4

Note: Try the different styles we learned in the lesson.