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: