Tailwind Layout: Flex, Grid, Spacing, Sizing

Tailwind doesn’t replace flexbox and grid — it gives them shorter names. Once you internalise the spacing scale and the responsive prefix system, you can build entire pages without leaving the HTML file. This post walks through the utilities you will use every day.

If flexbox or grid as CSS concepts are new to you, read CSS Flexbox Basics and CSS Grid Basics first. We will move quickly here.

Flex containers

Turn an element into a flex container with flex:

<div class="flex">
  <span>One</span>
  <span>Two</span>
  <span>Three</span>
</div>

By default, flex children sit in a row. Add direction with flex-row (default), flex-col, flex-row-reverse, or flex-col-reverse.

Wrapping behaviour comes from flex-wrap and flex-nowrap:

<div class="flex flex-wrap">
  <!-- items wrap to a new line when out of room -->
</div>

Alignment

Two pairs of utilities cover most cases.

Main axis (horizontal in a row, vertical in a column):

• justify-start — pack to the start
• justify-center — center
• justify-end — pack to the end
• justify-between — space between, edges flush
• justify-around — space around each item
• justify-evenly — equal space everywhere

Cross axis:

• items-start — align to the top (in a row)
• items-center — center vertically
• items-end — align to the bottom
• items-stretch — stretch to fill (default)
• items-baseline — align text baselines

<div class="flex items-center justify-between">
  <h2>Title</h2>
  <button>Action</button>
</div>

That single line is the bread and butter of headers, toolbars, and form rows.

Grid containers

Tailwind’s grid utilities mirror CSS grid:

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

grid-cols-3 creates three equal columns. You can go up to grid-cols-12 out of the box, or use arbitrary track definitions:

<div class="grid grid-cols-[200px_1fr] gap-6">
  <aside>Sidebar</aside>
  <main>Content</main>
</div>

Row utilities work the same way: grid-rows-2, grid-rows-[auto_1fr_auto], and so on.

To make an item span columns or rows, use col-span-* and row-span-*:

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Wide</div>
  <div>Narrow</div>
</div>

The spacing scale

Every spacing-related utility — padding, margin, gap, width, height — uses the same scale. The numbers map to rem values:

Class	Value	Pixels (default)
p-0	0	0
p-1	0.25rem	4px
p-2	0.5rem	8px
p-4	1rem	16px
p-6	1.5rem	24px
p-8	2rem	32px
p-12	3rem	48px
p-16	4rem	64px

Once you know the scale, every layout decision becomes “which step on the scale?” instead of “what pixel value?” That constraint keeps a site visually consistent.

Padding and margin

p-* sets padding on all sides; m-* does the same for margin. Axis-specific variants:

• px-4 py-2 — horizontal 1rem, vertical 0.5rem
• pt-6 — padding-top only
• mb-8 — margin-bottom only
• mx-auto — horizontal margin auto (centers a block)

<article class="mx-auto max-w-prose p-6">
  <h1 class="mb-4 text-2xl font-bold">Title</h1>
  <p class="text-gray-700">Body copy goes here.</p>
</article>

Gap (the right way to space flex/grid children)

For flex or grid containers, prefer gap-* over margins on children:

<div class="flex gap-4">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>

gap-4 puts 1rem between every item — no leading or trailing margin to clean up. You can split into axes with gap-x-* and gap-y-*.

This is the single biggest layout improvement to learn. Most ugly margin logic on lists or button rows disappears once you switch to gap-*.

Width and height

The same scale extends to sizing:

• w-4 — 1rem wide
• w-64 — 16rem wide
• w-full — 100%
• w-screen — 100vw
• w-1/2, w-1/3, w-2/3 — fractional widths
• w-auto — let the content decide

Heights work identically: h-12, h-full, h-screen, h-auto.

For containers that should never get too wide, max-w-* is the workhorse:

<main class="mx-auto max-w-3xl px-4">
  <!-- centered column, never wider than 48rem -->
</main>

Common max-w values: max-w-xs, max-w-sm, max-w-md, max-w-lg, max-w-xl, max-w-2xl through max-w-7xl, plus max-w-prose (a comfortable reading measure).

Responsive prefixes

Tailwind’s responsive system is mobile-first. Unprefixed classes apply at all sizes; prefixed classes apply from that breakpoint up.

Prefix	Min width	Typical device
(none)	0	phones
sm:	640px	large phones
md:	768px	tablets
lg:	1024px	small laptops
xl:	1280px	desktops
2xl:	1536px	large displays

A single element can layer prefixes:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <!-- 1 column on phone, 2 on tablet, 4 on laptop -->
</div>

Read left to right: start small, then override at each larger breakpoint. The unprefixed value is your baseline — never write sm:flex thinking “small screens.” It means “from sm and up.”

A real card layout

Putting flex, grid, spacing, sizing, and responsive prefixes together:

<section class="bg-gray-50 py-12">
  <div class="mx-auto max-w-6xl px-4">
    <h2 class="mb-8 text-2xl font-bold text-gray-900">
      Featured posts
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <article class="flex flex-col rounded-lg bg-white p-6 shadow-sm">
        <h3 class="text-lg font-semibold text-gray-900">
          Why testing matters
        </h3>
        <p class="mt-2 flex-1 text-gray-600">
          A short post on the long-term value of automated tests.
        </p>
        <a href="#" class="mt-4 font-medium text-indigo-600 hover:text-indigo-700">
          Read more →
        </a>
      </article>

      <article class="flex flex-col rounded-lg bg-white p-6 shadow-sm">
        <h3 class="text-lg font-semibold text-gray-900">
          Tailwind in production
        </h3>
        <p class="mt-2 flex-1 text-gray-600">
          Hard-won lessons from a year of shipping utilities.
        </p>
        <a href="#" class="mt-4 font-medium text-indigo-600 hover:text-indigo-700">
          Read more →
        </a>
      </article>

      <article class="flex flex-col rounded-lg bg-white p-6 shadow-sm">
        <h3 class="text-lg font-semibold text-gray-900">
          The case for fewer dependencies
        </h3>
        <p class="mt-2 flex-1 text-gray-600">
          Every package you add is a tax you pay forever.
        </p>
        <a href="#" class="mt-4 font-medium text-indigo-600 hover:text-indigo-700">
          Read more →
        </a>
      </article>
    </div>
  </div>
</section>

Read the structure once:

• The outer <section> paints the background and adds vertical padding
• The container centers and caps the width
• The grid switches from 1 to 2 to 3 columns as the screen grows
• Each card is a flex column so the “Read more” link sticks to the bottom regardless of paragraph length

This pattern — outer band, capped container, responsive grid of cards — handles a huge percentage of real layouts.

Stack and toolbar patterns

Two more patterns worth memorising:

Vertical stack with consistent spacing:

<div class="flex flex-col gap-4">
  <label>Email</label>
  <input class="rounded border p-2" />
  <button class="rounded bg-indigo-600 p-2 text-white">Submit</button>
</div>

Toolbar with title left, actions right:

<header class="flex items-center justify-between border-b p-4">
  <h1 class="text-xl font-bold">Dashboard</h1>
  <div class="flex gap-2">
    <button class="rounded border px-3 py-1">Export</button>
    <button class="rounded bg-indigo-600 px-3 py-1 text-white">
      New item
    </button>
  </div>
</header>

Both rely on the same five utilities in different combinations.

When to leave Tailwind

Layout utilities cover ~95% of real cases, but a few situations still call for hand-written CSS:

• Complex grid-template-areas named-zone layouts
• Container queries beyond Tailwind’s @container helpers
• Highly bespoke print stylesheets

Tailwind plays nicely with custom CSS — keep a small app.css for these edges, and use utilities everywhere else.

For a deeper grounding in the underlying concepts, CSS Responsive Design Basics is worth a read.

Recap

You now know:

• flex and grid turn elements into flex or grid containers
• items-* and justify-* handle alignment on each axis
• The spacing scale powers p-*, m-*, gap-*, w-*, and h-*
• gap-* is almost always better than margins on flex/grid children
• max-w-* plus mx-auto is the standard “centered column” recipe
• Responsive prefixes (sm:, md:, lg:, xl:, 2xl:) layer overrides on top of a mobile-first baseline

Next steps

Next, you can apply these utilities to the rest of a page: typography, colors, borders, and interactive states (hover, focus, active). The official Tailwind docs are organised by category and short — read the layout, flexbox, grid, and spacing sections end to end.

Related: What Is Tailwind?, Install Tailwind CSS, CSS Grid Basics.

Questions or feedback? Email codeloomdevv@gmail.com.