If you want to gain more understanding of how to use Tailwind's CSS Grid utilities, the good news is in this post I share knowledge on the subject with a variety of examples. I'll also be providing working code examples that you should feel free to use.
For anyone wondering, here's a visual representation of the layout:
It's your typical containerised layout solution, one that allows the container to span the full width of the page, yet constrains the content at a specified maximum width.
I'm a CSS Grid advocate
I'm a huge fan of CSS Grid, I always favour it for any kind of layout, I'm extremely biased towards it, I simply love the API and as I've been working with it for several years on both commercial & personal projects find it more familiar, the main reasons for this are:
CSS Grid is 2 dimensional, which means unlike flex items, grid items can be placed in 2 directions, horizontally and vertically (x & y).
display: gridthe amount of boilerplate HTML needed to create a complex layout is usually always less than it would be with
grid-gapproperty has been supported for longer,
grid-gapwas revolutionary, gaps were a huge problem in the world of CSS grid systems, you can see how obsessed over them I was by looking at this codepen collection of mine.
Tailwind deconstructs a very popular 12 column grid system into series of utility classes that are categorised by the various properties of the CSS Grid spec, e.g.
I can't say I've ever written:
grid-column: span 1 / span 1, it equates to
grid-column: span 1 but this is Tailwind's internal code so we don't really need to worry about that when using it for simple layouts.
Tailwind 12 column grid
I'll cut to the chase, the following example is a series of constrained 12 column grids wrapped in containers that span the full width of the viewport, some content is omitted but you can always see the full version in the codepen.
Bear in mind that this is example is not yet responsive, that's next.
Responsive Tailwind 12 column grid
As I started to work though the upcoming responsive example using the previous one, I realised the markup structure wouldn't lend itself to the kind of layouts I want at different breakpoints. I then changed it, notice how the structure of the markup in the next example is different to the previous example, checkout the codepen.
Responsive Tailwind 12 column grid with arbitrary values
Because of the use of
margin: auto and the fact that it's
<div/> city with the previous examples, I found myself writing this code the other day:
grid-template-columns: 1fr minmax(0px, 1280px) 1fr;
Doing it like this removes some of the excess HTML that you may or may not have to write when using Tailwind's layout system. I couldn't find a quick way to get the arbitrary classes to compile in either codepen or codesandbox so had to improvise, checkout the codepen.
I wasn't happy using what seems to me like an out of date practice, composing grid layouts using utility classes on more markup than is needed. I know, I know, I've just spent god-knows how long explaining how to to do that using Tailwind and provided examples, how contradictory of me 🤷♂️. I look at things from multiple perspectives, how you do this is down to what you're comfortable with.
When I'm in the throws of writing a lot of code using Tailwind I start to forget how to write CSS, or at-least how to think like I would if I was writing CSS. Otherwise I would normally come up with a 1 liner like that pretty quick.
You can get at me on Twitter, adios for now!