Skip to content

Tailwind CSS Grid

Standard grid

The minimum values required will normally be the number of columns, grid-gap and the outer padding of the grid container.

With tailwindcss we set grid-rows-none so the height of each row is independant of other rows.

This pattern will set up a flexible grid that will stretch to the full width of the browser.

<div className="grid grid-cols-1 grid-rows-none px-5 xl:px-8 2xl:px-36 md:grid-cols-12 md:gap-x-4 xl:grid-cols-12">

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.

<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>

Tailwind Playground

Custom column configuration

One fixed width column and the other is set to take the remaining width.

Add to Tailwind config.

    extend: {
      gridTemplateColumns: {
        // Custom column configuration
        'give-away': '13rem 1fr',

Then use as follows:

<div class="grid-cols-give-away grid gap-x-5">
  <div class="bg-slate-300">1</div>
  <div class="bg-slate-300">2</div>