Tip #7: Build grid systems with flex containers

It may come as a surprise that I recommend you use flex containers for building the basic 12-column grid system rather than CSS grid.

While CSS grid is great for building literal grids... it's not the best for building a responsive, 12-column grid that most websites today use for layouts.

Reason being: CSS Grid is a 2-dimensional layout system wherein the 12-column grid is inherently a 1-dimensional layout.

What I mean by this is that we only care about columns in the 12-column grid (hence its name) and not the rows.

The other issue with CSS grid is it that somewhat inflexible when it comes to spacing content, justifying it to the center, etc.

Flex containers make 12-column grids super trivial, this is thanks flex's ability to resize the width and height of div elements super easily.

To get started, define a container div and apply a few utilities with TailwindCSS:

<div class="container mx-auto flex">
	...
</div>

We're almost there, now to define each column in the grid, you can simply use a div and give it the flex-1 property:

<div class="p-6">
  <div class="container mx-auto flex">
    <div class="flex-1 rounded-lg bg-blue-300 p-10">1</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">2</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">3</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">4</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">5</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">6</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">7</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">8</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">9</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">10</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">11</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">12</div>
  </div>
</div>

Note that I added a few more utilities here just to show the columns in their full glory:

https://imgur.com/9m2KTMG

To add a gap (or gutter) between the columns, simply use a gap utility on the flex container:

<div class="p-6">
  <div class="container mx-auto flex gap-x-4">
    <div class="flex-1 rounded-lg bg-blue-300 p-10">1</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">2</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">3</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">4</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">5</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">6</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">7</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">8</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">9</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">10</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">11</div>
    <div class="flex-1 rounded-lg bg-blue-300 p-10">12</div>
  </div>
</div>

Typically, gap-x-4 is what you want (this will add a 16px gutter in between your columns, which is pretty standard across UI libraries using a 12-column grid).

I've written some starter code for this grid if you'd like to use it in your project!