Flexbox and Grid Layout

Introduction

Layout is where utility classes shine. Tailwind exposes the CSS flexbox and grid properties as short classes. If you know the CSS from the CSS course, the names will feel familiar.

Flexbox basics

Add flex to a parent to lay its children in a row.

<div class="flex items-center justify-between gap-4">
  <span class="font-bold">Logo</span>
  <nav class="flex gap-4">
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</div>

The key utilities:

A column layout, such as a stacked form, is flex flex-col gap-4. Centring something in both directions is flex items-center justify-center.

In v4, the grow and shrink utilities are named grow and shrink-0. The older flex-grow and flex-shrink-0 names are listed as removed in the upgrade guide, but the 4.3.3 compiler I tested still generates them. Use the new short names in new code.

A flexible sidebar layout

flex-1 lets an item take the remaining space, and shrink-0 stops an item from being squeezed:

<div class="flex min-h-screen">
  <aside class="w-64 shrink-0 bg-gray-100 p-4">Sidebar</aside>
  <main class="flex-1 p-6">Content</main>
</div>

Grid basics

Use grid and a column template for two-dimensional layouts such as card galleries.

<div class="grid grid-cols-3 gap-6">
  <div class="rounded-xl bg-white p-4 shadow-sm">Card 1</div>
  <div class="rounded-xl bg-white p-4 shadow-sm">Card 2</div>
  <div class="rounded-xl bg-white p-4 shadow-sm">Card 3</div>
</div>

grid-cols-3 compiles to grid-template-columns: repeat(3, minmax(0, 1fr)), which means three equal columns that can shrink below their content. (I checked grid-cols-12 and others exist the same way.)

A featured card that spans two columns is col-span-2.

Custom column templates

When equal columns are not what you need, use an arbitrary value. Underscores stand for spaces:

<div class="grid grid-cols-[200px_1fr] gap-4">
  <nav>Fixed width column</nav>
  <section>Flexible column</section>
</div>

I compiled grid-cols-[1fr_2fr] and it produced grid-template-columns: 1fr 2fr.

Auto-fit card grids

A grid that fits as many cards as there is room for, without breakpoints:

<div class="grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))] gap-6">
  ...
</div>

Flex or grid?

• Flex is best for one-dimensional layouts: a row of buttons, a navbar, a media object.
• Grid is best when you align things in rows and columns: page layouts and card galleries.
• You can nest them. A grid of cards where each card is a flex column is very common.

Common mistakes

• Forgetting flex on the parent, so justify-* and items-* do nothing.
• Using w-1/3 on flex children instead of grid-cols-3 or basis-1/3.
• Missing min-w-0 on a flex child that holds long text, which can cause overflow.
• Using margins instead of gap.

Try it yourself

Build a navbar with a logo on the left and links on the right using flex justify-between items-center. Below it, build a 3-column grid of cards with grid grid-cols-3 gap-6 and make the first card span two columns.

Summary

• Add flex or grid to a parent, then control alignment and spacing with items-*, justify-* and gap-*.
• Use flex-1 and shrink-0 for flexible and fixed children, and grid-cols-* and col-span-* for grids.
• Arbitrary templates like grid-cols-[200px_1fr] use underscores for spaces, and gap is better than margins between children.