Grids
Modern CSS with Tailwind — by Noel Rappin (37 / 59)
One of the great innovations of the first round of CSS frameworks was support for a grid layout where you could easily place things on a 12-column grid. The existence of grid spacing made page layout much easier. Over time, the frameworks became even more flexible and eventually grid support was built directly into CSS.
Grids are still great for a lot of layout choices, and Tailwind offers useful utilities for setting up a grid layout using the CSS grid properties. First, there’s .grid, which is a utility for the CSS property, display: grid. You need the .grid utility as part of the class list at the top level of your grid, above the individual elements of the grid.
Once you’ve created a grid element, you can use Tailwind to specify the number of rows or columns in that grid. You can also adjust the behavior of individual elements in the grid. You can specify a start or end point for an element in the grid, you can specify the span of rows or columns the element takes up, or you can 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 you 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.
