Tailwind Grid Layouts Advanced: Auto-Fill, Span, Subgrid

Why You're Still Underusing CSS Grid

Honestly, most Tailwind projects top out at grid-cols-3 and call it a day. That's fine for simple card rows. But the moment your designs get interesting — unequal column widths, responsive tile layouts that don't break at exactly 768px, cards that need their inner content to align across rows — you need the deeper end of the grid spec.

CSS Grid Level 1 landed in 2017. We're in 2026 and the subgrid keyword, which shipped in Chrome 117 and Firefox 71, still gets zero coverage in most Tailwind tutorials. That's a shame, because it solves the single most annoying layout problem in component-based UIs: getting card titles and footers to line up when the card content has different heights.

This article is about the utilities you probably skipped: auto-fill vs auto-fit, minmax(), named lines via arbitrary values, col-span-full, and subgrid. You don't need to memorise the entire CSS grid spec — you need the 20% that does 80% of the hard work.

Auto-Fill vs Auto-Fit: They Are Not the Same

Both auto-fill and auto-fit work with repeat() and minmax() to create responsive column counts without a single media query. The difference is subtle but it matters the second you have fewer items than the available columns.

With auto-fill, the grid keeps creating column tracks even when there's nothing to put in them. With auto-fit, empty tracks collapse to zero width and your items stretch to fill the space. In Tailwind you can't write these directly as a utility class — you need an arbitrary value on the grid-cols property.

<!-- auto-fill: empty tracks persist, items don't stretch -->
<div class="grid [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))] gap-6">
  <!-- cards -->
</div>

<!-- auto-fit: empty tracks collapse, last row items fill the width -->
<div class="grid [grid-template-columns:repeat(auto-fit,minmax(280px,1fr))] gap-6">
  <!-- cards -->
</div>

In practice, auto-fill is what you want for card grids where you don't want the last row to stretch weirdly. auto-fit is great for a small set of feature blocks you want to always fill the full container width. Worth noting: the 280px minimum in minmax(280px,1fr) is doing a lot of work here — it's the breakpoint where your card becomes unreadable, not an arbitrary number. Tune it to your actual content.

Spanning Columns and Rows Without Losing Your Mind

The col-span-{n} and row-span-{n} utilities are in Tailwind's core, but they hide a few gotchas. col-span-full is the one that saves you most often — it stretches an item across every column in the current grid without you knowing the column count in advance. Perfect for section headers or hero banners inside a card grid.

<div class="grid [grid-template-columns:repeat(auto-fill,minmax(240px,1fr))] gap-4">
  <!-- full-width banner regardless of column count -->
  <div class="col-span-full bg-violet-600 rounded-xl p-8">
    <h2>Featured</h2>
  </div>

  <!-- regular cards -->
  <div class="col-span-1">Card A</div>
  <div class="col-span-1">Card B</div>

  <!-- double-wide card -->
  <div class="col-span-2">Card C (wide)</div>
</div>

Row spanning trips people up more than column spanning. row-span-2 only works when there's actually a second row for the item to bleed into — which requires either a fixed row-height or explicit grid-rows-* on the parent. If you don't set row heights and your content is dynamic, you'll get implicit rows with auto height and row-span-2 will give you whatever height the grid decides to assign. Set grid-rows-[masonry] in Chrome 122+ or use explicit auto row definitions.

One more thing — col-start-{n} and col-end-{n} are underrated. Instead of counting spans, you're pinning items to named positions. col-start-2 col-end-4 spans exactly two columns starting from the second track. Combine this with named grid lines via arbitrary values ([grid-template-columns:'sidebar'_200px_'main'_1fr]) and you get layout that reads like intent, not arithmetic.

Subgrid: The Feature That Finally Fixes Card Alignment

Here's the problem you've definitely hit: a row of cards where each card has a title, some body text, and a CTA button at the bottom. The body text length varies. Your buttons end up at different vertical positions and the whole row looks misaligned. You tried flexbox column + mt-auto inside each card. It works, but it's a hack.

Subgrid is the real answer. It lets a grid item inherit its parent's track definitions and participate in them as if it were a direct child of the root grid. Available in all modern browsers since late 2023, and Tailwind v4 exposes it with grid-rows-subgrid and grid-cols-subgrid.

<!-- Parent grid defines the row tracks -->
<div class="grid [grid-template-columns:repeat(auto-fill,minmax(280px,1fr))] [grid-template-rows:auto_1fr_auto] gap-6">

  <!-- Each card opts into the parent's row tracks -->
  <div class="grid grid-rows-subgrid row-span-3 bg-white rounded-2xl p-6 shadow">
    <!-- Slot 1: title -->
    <h3 class="text-lg font-semibold">Card Title</h3>

    <!-- Slot 2: body — this is the 1fr row, absorbs extra height -->
    <p class="text-gray-600 text-sm">Variable-length body text goes here...</p>

    <!-- Slot 3: CTA — always at the bottom of the row -->
    <button class="mt-0 w-full py-2 bg-violet-600 text-white rounded-lg">
      Get started
    </button>
  </div>

</div>

Quick aside: the row-span-3 on the card is required because the card needs to span all three row tracks (title, body, footer) that the parent grid defines. Without it, the card only occupies a single implicit row and the subgrid has nothing to align to. This trips up almost everyone the first time.

For live examples of subgrid-powered card layouts, check out the Empire UI component library — several of the bento grid and feature card components use this exact pattern with the glassmorphism variant applied on top.

Dense Packing and the `grid-flow-dense` Trick

By default, grid items flow in source order and leave gaps when a large item doesn't fit in the remaining space on a row. grid-flow-dense tells the grid auto-placement algorithm to backfill those gaps with smaller items — even if that means breaking source order.

<div class="grid [grid-template-columns:repeat(auto-fill,minmax(160px,1fr))] grid-flow-dense gap-3">
  <div class="col-span-2 row-span-2 bg-violet-100 rounded-xl">Big</div>
  <div class="bg-gray-100 rounded-xl">Small</div>
  <div class="bg-gray-100 rounded-xl">Small</div>
  <div class="col-span-2 bg-blue-100 rounded-xl">Medium</div>
  <div class="bg-gray-100 rounded-xl">Small</div>
</div>

Look, this is exactly how photo masonry layouts and Pinterest-style grids work — but without JavaScript, without column-count tricks, and without any third-party library. The caveat is accessibility: because visual order diverges from DOM order, keyboard navigation and screen readers will traverse in source order while your eyes follow the visual arrangement. For purely decorative image grids it's fine. For interactive card content, it isn't.

That said, if you're building a decorative background or a style preview grid — like the kind you'd see on a UI library landing page — dense auto-placement is a clean CSS-only approach. You can mix it with the gradient generator to create colourful grid cells that don't need any images at all.

Named Grid Areas for Page-Level Layouts

Named grid areas are the most readable way to build page skeletons. You write the layout as ASCII art in a string, then assign elements to slots by name. Tailwind supports this entirely through arbitrary values.

<div
  class="
    grid
    [grid-template-areas:'header_header'_'sidebar_main'_'footer_footer']
    [grid-template-columns:240px_1fr]
    [grid-template-rows:64px_1fr_48px]
    min-h-screen
  "
>
  <header class="[grid-area:header] bg-gray-900 text-white px-6 flex items-center">
    Nav
  </header>
  <aside class="[grid-area:sidebar] bg-gray-100 p-4">
    Sidebar
  </aside>
  <main class="[grid-area:main] p-6">
    Content
  </main>
  <footer class="[grid-area:footer] bg-gray-800 text-white px-6 flex items-center">
    Footer
  </footer>
</div>

The Tailwind arbitrary value syntax for grid-template-areas requires you to escape the quotes and separate row strings with underscores instead of spaces. A 'header_header' row means both columns are occupied by the header area. It looks weird at first but you get used to it in about 10 minutes.

For responsive named areas you combine this with Tailwind's responsive prefixes. On mobile you can collapse to a single column and stack areas vertically, then on lg: switch to the full multi-column layout. This is significantly more maintainable than the Flexbox equivalent once you have more than two columns. One caveat: the string gets long on complex layouts and Prettier will wrap it awkwardly — you may want to extract the layout declaration into a CSS class in your globals.css and apply it via className.

If you're using this to build visual-heavy pages with Empire UI components, check out the templates section — the dashboard and landing page starters already use named grid areas so you can see a real-world implementation before you write your own.

Putting It All Together: A Production-Ready Card Grid

Here's how you'd combine auto-fill, minmax, subgrid, and dense packing into something you'd actually ship. This is the pattern we use for feature card sections — responsive column count, aligned footers, no JS, no media queries except one for the minimum column width.

// FeatureGrid.tsx
export function FeatureGrid({ features }: { features: Feature[] }) {
  return (
    <div
      className={[
        'grid',
        '[grid-template-columns:repeat(auto-fill,minmax(280px,1fr))]',
        // three named row tracks per card
        '[grid-template-rows:auto_1fr_auto]',
        'gap-6',
      ].join(' ')}
    >
      {features.map((f) => (
        <article
          key={f.id}
          className={[
            // participate in parent row tracks
            'grid grid-rows-subgrid row-span-3',
            'bg-white/10 backdrop-blur-md border border-white/20',
            'rounded-2xl p-6',
          ].join(' ')}
        >
          <h3 className="font-semibold text-lg">{f.title}</h3>
          <p className="text-sm text-gray-400 mt-2">{f.description}</p>
          <a
            href={f.href}
            className="mt-4 inline-flex items-center text-violet-400 text-sm font-medium hover:underline"
          >
            Learn more →
          </a>
        </article>
      ))}
    </div>
  );
}

The glassmorphism classes on the card (bg-white/10 backdrop-blur-md border border-white/20) are Empire UI's standard glass recipe — you can grab pre-built variants straight from the glassmorphism components page and swap them in. No need to hand-tune backdrop blur values when the library ships 12 pre-calibrated variants.

Is this more verbose than a three-class flex container? Yes. Does it handle every layout edge case without a single JavaScript resize observer? Also yes. Once you've built one layout this way you'll never go back to flexbox hacks for two-dimensional problems. The grid spec was designed for exactly this.

FAQ

Read next