Skip to content

CSS grid

See also Tailwind CSS Grid

One column grid

A full width section with its own background colour that has a fixed width so the component is centered on the screen.

Here we use the container class to set the max-width of the element based on the current breakpoint.

<div class="bg-slate-300">
  <div class="container mx-auto px-5">

Implicit grid

When you need columns of varying widths you can create an implicit grid, the key class here being auto-cols-min. You also need to include a col-start-{n} class for each column that you want.

auto-cols-min results in grid-auto-columns: min-content;

<div class="grid auto-cols-min gap-2 bg-zinc-500 p-5">
  <div class="col-start-1 w-20 bg-zinc-100 p-5">col 1</div>
  <div class="col-start-2 w-40 bg-zinc-100 p-5">col 2</div>
  <div class="col-start-3 w-24 bg-zinc-100 p-5">col 3</div>
  <div class="col-start-4 w-48 bg-zinc-100 p-5">col 4</div>

Demo of above:

More info:


Learn CSS Grid with Wes Bos