Tailwind CSS 15 🎨 Grid Layouts (Template Columns, Rows, Spans, Auto Flow) - KandZ

CSS Grid is the two-dimensional layout system that complement flexbox’s one dimension. Flexbox arranges items along a single axis; grid arranges them along both rows and columns simultaneously. This makes grid the right tool for page layouts, dashboards, card galleries, and any design where the alignment of items in both directions matters. Tailwind exposes the grid properties as utilities, so a layout is declared with class names like grid grid-cols-3 gap-6 and the items place themselves.

The grid utilities fall into two categories: container properties that define the grid structure, and item properties that control where each child sits. Template columns and rows define the track sizes. Spans let an item cross multiple columns or rows. Auto-flow determines how items that are not explicitly placed fill the grid. Gap adds space between tracks. Auto-fit and auto-fill with minmax() create responsive grids that adapt to the container width without media queries.

This chapter covers template columns and rows, spans and placement, auto-flow, gap, the responsive auto-fit pattern, and the alignment properties that control how items sit within their grid cells.

Key point: grid establishes a grid container; grid-cols-* and grid-rows-* define tracks. col-span-* and row-span-* make an item cross multiple tracks. grid-flow-row and grid-flow-col control fill order. grid-cols-[repeat(auto-fit,minmax(200px,1fr))] creates a responsive grid without media queries. gap-* spaces tracks in both directions.

Why grid utilities exist

The two-dimensional problem. Flexbox handles one dimension well. A layout that must align items across both rows and columns — a dashboard with cards of different sizes, a form with labeled fields, a gallery with featured items — requires two-dimensional control. Grid provides it.

The explicit placement problem. With flexbox, the order and size of items is determined by the sequence and the flex properties. With grid, tracks are defined and items are placed into them, either explicitly or by auto-flow. This makes it possible to build layouts where an item spans two columns, another spans two rows, and the rest flow into the remaining cells.

The responsive-without-media-queries problem. The repeat(auto-fit, minmax(200px, 1fr)) pattern creates a grid where the number of columns adjusts automatically to the container width. When there is room for three columns, there are three; when there is room for two, there are two. This eliminates the need for breakpoint-specific column counts in many cases.

The track-sizing problem. Grid tracks can be sized with fixed units, fractions, auto, min-content, max-content, and minmax(). Tailwind exposes these as utilities and arbitrary values, so the sizing is declarative.

The alignment problem. Grid has its own alignment properties — justify-items, align-items, place-items, justify-content, align-content, place-content — for positioning items within their cells and the grid within its container. These complement the flex alignment properties and are sometimes confused with them.

a. Establishing a grid container

The grid utility sets display: grid. The inline-grid variant sets display: inline-grid.

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

With no tracks defined, the items stack in a single column, each taking the full width. The tracks must be defined for the grid to arrange items in a meaningful way.

b. Template columns

The grid-cols-* utilities set grid-template-columns, defining the number and size of columns.

Utility	CSS	Columns
`grid-cols-1`	`repeat(1, minmax(0, 1fr))`	1 equal column
`grid-cols-2`	`repeat(2, minmax(0, 1fr))`	2 equal columns
`grid-cols-3`	`repeat(3, minmax(0, 1fr))`	3 equal columns
`grid-cols-4`	`repeat(4, minmax(0, 1fr))`	4 equal columns
`grid-cols-6`	`repeat(6, minmax(0, 1fr))`	6 equal columns
`grid-cols-12`	`repeat(12, minmax(0, 1fr))`	12 equal columns

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

The minmax(0, 1fr) in the default columns is deliberate. Without the minmax(0, ...), a grid item with content wider than its track would expand the track. The minmax(0, 1fr) prevents that, so tracks stay equal even when content is long.

The 12-column grid is the classic layout system. Items are placed by spanning the number of columns they need:

<div class="grid grid-cols-12 gap-4">
  <aside class="col-span-3">Sidebar</aside>
  <main class="col-span-9">Content</main>
</div>

For arbitrary column counts, v4 supports dynamic values: grid-cols-15, grid-cols-24. These generate repeat(15, minmax(0, 1fr)) and similar.

<div class="grid grid-cols-15 gap-2">
  ...
</div>

For complex templates, arbitrary values use the full CSS syntax:

<div class="grid grid-cols-[200px_1fr_auto] gap-4">
  <aside>Fixed 200px</aside>
  <main>Flexible</main>
  <button>Auto</button>
</div>

The underscores represent spaces in the CSS value. grid-cols-[200px_1fr_auto] compiles to grid-template-columns: 200px 1fr auto.

c. Template rows

The grid-rows-* utilities set grid-template-rows, defining the number and size of rows.

<div class="grid grid-rows-3 gap-4 h-96">
  <div>Row 1</div>
  <div>Row 2</div>
  <div>Row 3</div>
</div>

Rows are defined less often than columns because rows usually size to their content. But when a grid has a fixed height and specific row structure, grid-rows-* sets it.

A common pattern is a full-height page layout with a fixed header, flexible content, and fixed footer:

<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</div>

The auto rows size to their content, and the 1fr row absorbs the remaining space.

d. Column and row spans

The col-span-* and row-span-* utilities make an item cross multiple tracks.

Utility	CSS
`col-span-1`	`grid-column: span 1 / span 1`
`col-span-2`	`grid-column: span 2 / span 2`
`col-span-3`	`grid-column: span 3 / span 3`
`col-span-full`	`grid-column: 1 / -1`

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">Spans two columns</div>
  <div>One column</div>
  <div>One column</div>
</div>

The col-span-full utility makes the item span every column, which is useful for full-width sections in a multi-column grid.

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-full">Full-width header</div>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Row spans work the same way:

<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div class="row-span-2">Spans two rows</div>
  <div>Cell</div>
  <div>Cell</div>
  <div>Cell</div>
  <div>Cell</div>
</div>

For explicit placement at a specific track, the col-start-*, col-end-*, row-start-*, and row-end-* utilities set the start and end lines:

<div class="grid grid-cols-4 gap-4">
  <div class="col-start-2 col-end-4">Placed in columns 2 and 3</div>
</div>

Explicit placement is useful when an item should sit at a specific position rather than flowing into the next available cell.

e. Auto-flow

The grid-flow-* utilities set grid-auto-flow, which controls how items that are not explicitly placed fill the grid.

Utility	CSS	Behavior
`grid-flow-row`	`grid-auto-flow: row`	Fill row by row (default)
`grid-flow-col`	`grid-auto-flow: column`	Fill column by column
`grid-flow-dense`	`grid-auto-flow: dense`	Fill gaps with smaller items
`grid-flow-row-dense`	`grid-auto-flow: row dense`	Row flow with dense packing
`grid-flow-col-dense`	`grid-auto-flow: column dense`	Column flow with dense packing

<div class="grid grid-cols-3 grid-flow-row gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

The dense variants are useful when items have different spans. Without dense, a small item that follows a large one may leave a gap, because the grid does not backtrack to fill earlier holes. With dense, the grid attempts to fill those gaps with later items.

<div class="grid grid-cols-4 grid-flow-row-dense gap-4">
  <div class="col-span-2">Large</div>
  <div>Small</div>
  <div class="col-span-2">Large</div>
  <div>Small</div>
  <div>Small</div>
</div>

Dense packing can produce a visual order that differs from the DOM order, which affects tab order and screen readers. It should be used with awareness of that trade-off.

f. Gap

The gap-* utilities set gap, row-gap, and column-gap for the grid.

Utility	CSS
`gap-4`	`gap: 1rem`
`gap-x-4`	`column-gap: 1rem`
`gap-y-4`	`row-gap: 1rem`

<div class="grid grid-cols-3 gap-6">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<div class="grid grid-cols-3 gap-x-6 gap-y-4">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Using different row and column gaps is common in card grids where the horizontal spacing should be larger than the vertical, or vice versa.

g. Responsive grids without media queries

The repeat(auto-fit, minmax(...)) pattern creates a grid where the number of columns adjusts to the available width. The grid fits as many columns as will satisfy the minimum size, and each column takes an equal share of the remaining space.

<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

At 1000px wide with a 200px minimum, the grid fits four columns. At 600px wide, it fits three. At 400px wide, it fits two. At 200px wide, it fits one. No media queries are needed.

The auto-fill variant behaves similarly but creates empty tracks to fill the row, while auto-fit collapses empty tracks so the existing columns stretch. For most card grids, auto-fit produces the desired result: the columns stretch to fill the container when there are few items.

<!-- auto-fit: columns stretch to fill -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
</div>

For responsive grids where the column count is controlled by breakpoints rather than automatic fitting, the responsive variants of grid-cols-* are used:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

This is the explicit approach: one column on mobile, two on small, three on large, four on extra-large. Both approaches are valid; the auto-fit pattern is more automatic, and the breakpoint approach gives more control.

h. Alignment in grid

Grid has its own alignment properties. The justify-* and align-* prefixes are reused from flexbox, but they apply to grid tracks and items.

Utility	CSS	Effect
`justify-items-start`	`justify-items: start`	Align items to start of cell
`justify-items-center`	`justify-items: center`	Center items in cell
`justify-items-end`	`justify-items: end`	Align items to end of cell
`justify-items-stretch`	`justify-items: stretch`	Stretch items (default)
`align-items-start`	`align-items: start`	Align items to top of cell
`align-items-center`	`align-items: center`	Center items vertically
`align-items-end`	`align-items: end`	Align items to bottom of cell
`justify-content-*`	`justify-content`	Align the grid within its container
`align-content-*`	`align-content`	Align rows within the grid

The place-items-* utility combines both:

<div class="grid place-items-center h-64">
  <div>Centered both ways</div>
</div>

The place-content-* utility combines justify-content and align-content, aligning the grid itself within its container:

<div class="grid grid-cols-2 place-content-center h-96">
  <div>Item</div>
  <div>Item</div>
</div>

For individual items, justify-self-* and align-self-* override the container’s alignment:

<div class="grid grid-cols-3">
  <div class="justify-self-end">Right-aligned in cell</div>
  <div class="self-center">Centered vertically</div>
</div>

Complete Example Session

<!-- ============================================
PART 1: BASIC THREE-COLUMN GRID
============================================ -->
<div class="grid grid-cols-3 gap-6">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<!-- ============================================
PART 2: RESPONSIVE COLUMN COUNT
============================================ -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

<!-- ============================================
PART 3: AUTO-FIT GRID
============================================ -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

<!-- ============================================
PART 4: COLUMN SPANS
============================================ -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 bg-blue-100 p-4">Spans 2</div>
  <div class="bg-gray-100 p-4">1</div>
  <div class="bg-gray-100 p-4">1</div>
</div>

<!-- ============================================
PART 5: FULL-WIDTH SECTION
============================================ -->
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-full bg-gray-100 p-4">Header</div>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<!-- ============================================
PART 6: ROW SPANS
============================================ -->
<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div class="row-span-2 bg-blue-100 p-4">Spans 2 rows</div>
  <div class="bg-gray-100 p-4">Cell</div>
  <div class="bg-gray-100 p-4">Cell</div>
  <div class="bg-gray-100 p-4">Cell</div>
  <div class="bg-gray-100 p-4">Cell</div>
</div>

<!-- ============================================
PART 7: EXPLICIT PLACEMENT
============================================ -->
<div class="grid grid-cols-4 gap-4">
  <div class="col-start-2 col-end-4 bg-blue-100 p-4">
    Columns 2 and 3
  </div>
</div>

<!-- ============================================
PART 8: DENSE AUTO-FLOW
============================================ -->
<div class="grid grid-cols-4 grid-flow-row-dense gap-4">
  <div class="col-span-2 bg-blue-100 p-4">Large</div>
  <div class="bg-gray-100 p-4">Small</div>
  <div class="col-span-2 bg-blue-100 p-4">Large</div>
  <div class="bg-gray-100 p-4">Small</div>
  <div class="bg-gray-100 p-4">Small</div>
</div>

<!-- ============================================
PART 9: PAGE LAYOUT WITH GRID ROWS
============================================ -->
<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">
  <header class="bg-white shadow-sm p-4">Header</header>
  <main class="p-6">Content</main>
  <footer class="bg-gray-50 p-4">Footer</footer>
</div>

<!-- ============================================
PART 10: COMPLETE DASHBOARD
============================================ -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 p-6">
  <aside class="lg:col-span-3 bg-white rounded-lg shadow p-4">
    Sidebar
  </aside>
  <main class="lg:col-span-9 space-y-6">
    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
      <div class="bg-white rounded-lg shadow p-4">Stat 1</div>
      <div class="bg-white rounded-lg shadow p-4">Stat 2</div>
      <div class="bg-white rounded-lg shadow p-4">Stat 3</div>
      <div class="bg-white rounded-lg shadow p-4">Stat 4</div>
    </div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4">
      <div class="bg-white rounded-lg shadow p-4">Chart</div>
      <div class="bg-white rounded-lg shadow p-4">Table</div>
    </div>
  </main>
</div>

These ten parts cover basic grids, responsive column counts, auto-fit, column spans, full-width sections, row spans, explicit placement, dense auto-flow, page layouts with grid rows, and a complete dashboard.

Quick Reference

Container Utilities

Utility	CSS
`grid`	`display: grid`
`inline-grid`	`display: inline-grid`
`grid-cols-3`	`grid-template-columns: repeat(3, minmax(0, 1fr))`
`grid-rows-2`	`grid-template-rows: repeat(2, minmax(0, 1fr))`
`grid-flow-row`	`grid-auto-flow: row`
`grid-flow-col`	`grid-auto-flow: column`
`grid-flow-row-dense`	`grid-auto-flow: row dense`

Column Spans

Utility	CSS
`col-span-2`	`grid-column: span 2 / span 2`
`col-span-full`	`grid-column: 1 / -1`
`col-start-2`	`grid-column-start: 2`
`col-end-4`	`grid-column-end: 4`

Row Spans

Utility	CSS
`row-span-2`	`grid-row: span 2 / span 2`
`row-span-full`	`grid-row: 1 / -1`
`row-start-1`	`grid-row-start: 1`
`row-end-3`	`grid-row-end: 3`

Gap

Utility	CSS
`gap-4`	`gap: 1rem`
`gap-x-4`	`column-gap: 1rem`
`gap-y-4`	`row-gap: 1rem`

Alignment

Utility	CSS
`justify-items-center`	`justify-items: center`
`align-items-center`	`align-items: center`
`place-items-center`	`place-items: center`
`justify-content-center`	`justify-content: center`
`place-content-center`	`place-content: center`
`justify-self-end`	`justify-self: end`
`self-center`	`align-self: center`

Responsive Patterns

Pattern	Purpose
`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`	Breakpoint column count
`grid-cols-[repeat(auto-fit,minmax(250px,1fr))]`	Automatic fit
`grid-cols-[repeat(auto-fill,minmax(200px,1fr))]`	Fill with empty tracks

Best Practices

✅ Do This:

<!-- Responsive columns with breakpoints -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- Auto-fit for card grids -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">

<!-- Full-width section in a grid -->
<div class="col-span-full">

<!-- Page layout with grid rows -->
<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">

<!-- Center items in cells -->
<div class="grid place-items-center">

❌ Don’t Do This:

<!-- Grid without tracks -->
<div class="grid">  <!-- ❌ single column by default -->

<!-- Missing gap -->
<div class="grid grid-cols-3">  <!-- ❌ items touch -->

<!-- Fixed pixel columns when fractions work -->
<div class="grid-cols-[300px_300px]">  <!-- ❌ use 1fr -->

<!-- Dense flow without considering tab order -->
<div class="grid-flow-row-dense">  <!-- ❌ visual order differs from DOM -->

Common Pitfalls

Pitfall	Why It Happens	Fix
Tracks expand unexpectedly	Missing `minmax(0, 1fr)`	Use `grid-cols-*` defaults
Items overflow their cells	Content wider than track	Use `min-w-0` on the item
Auto-fit not fitting	Minmax minimum too large	Reduce the `minmax` minimum
Dense reorders visually	`grid-flow-*` dense	Accept or avoid dense
`col-span-*` has no effect	Parent is not `grid`	Add `grid` to parent
Gap not applied	Parent is not `grid`	Add `grid` to parent

Real-World Examples

1. Card Gallery

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

2. Auto-Fit Cards

<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
  <div class="bg-white rounded-lg shadow p-4">Card</div>
</div>

3. Dashboard Layout

<div class="grid grid-cols-12 gap-6">
  <aside class="col-span-3">Sidebar</aside>
  <main class="col-span-9">Content</main>
</div>

4. Full-Width Header

<div class="grid grid-cols-3 gap-4">
  <header class="col-span-full">Header</header>
  <div>Column</div>
  <div>Column</div>
  <div>Column</div>
</div>

5. Featured Card

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2 row-span-2">Featured</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

6. Page Layout

<div class="grid grid-rows-[auto_1fr_auto] min-h-screen">
  <header>Header</header>
  <main>Content</main>
  <footer>Footer</footer>
</div>

7. Stat Grid

<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  <div class="bg-white rounded p-4">Stat</div>
</div>

8. Centered Content

<div class="grid place-items-center min-h-screen">
  <h1>Centered</h1>
</div>

9. Form Layout

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
  <label>First name</label>
  <input />
  <label>Last name</label>
  <input />
</div>

10. Bento Grid

<div class="grid grid-cols-4 grid-rows-3 gap-4 h-96">
  <div class="col-span-2 row-span-2">Large</div>
  <div class="col-span-2">Wide</div>
  <div>Small</div>
  <div>Small</div>
  <div class="col-span-2">Wide</div>
</div>

Visual

Grid Anatomy

┌──────────────────────────────────────────────────────────────┐
│  grid-cols-3 grid-rows-2 gap-4                               │
│                                                              │
│  ┌─────────────┬─────────────┬─────────────┐                │
│  │  Cell 1,1   │  Cell 1,2   │  Cell 1,3   │  Row 1         │
│  ├─────────────┼─────────────┼─────────────┤                │
│  │  Cell 2,1   │  Cell 2,2   │  Cell 2,3   │  Row 2         │
│  └─────────────┴─────────────┴─────────────┘                │
│       Col 1        Col 2        Col 3                       │
│                                                              │
│  3 columns × 2 rows = 6 cells                                │
│  Items flow row by row by default                            │
└──────────────────────────────────────────────────────────────┘

Column Spans

┌──────────────────────────────────────────────────────────────┐
│  grid-cols-4                                                 │
│                                                              │
│  ┌─────────────────────────┬─────────────┬─────────────┐    │
│  │  col-span-2             │  1 col      │  1 col      │    │
│  └─────────────────────────┴─────────────┴─────────────┘    │
│                                                              │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  col-span-full                                         │  │
│  └────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────┘

Auto-Fit Responsive

┌──────────────────────────────────────────────────────────────┐
│  grid-cols-[repeat(auto-fit,minmax(250px,1fr))]              │
│                                                              │
│  WIDE CONTAINER (1000px):                                    │
│  ┌──────────┬──────────┬──────────┬──────────┐              │
│  │  Card    │  Card    │  Card    │  Card    │              │
│  └──────────┴──────────┴──────────┴──────────┘              │
│                                                              │
│  MEDIUM CONTAINER (600px):                                   │
│  ┌──────────────┬──────────────┐                            │
│  │  Card        │  Card        │                            │
│  └──────────────┴──────────────┘                            │
│                                                              │
│  NARROW CONTAINER (300px):                                   │
│  ┌────────────────────────────┐                             │
│  │  Card                      │                             │
│  └────────────────────────────┘                             │
│                                                              │
│  No media queries. Columns adapt to available width.         │
└──────────────────────────────────────────────────────────────┘

Page Layout with Grid Rows

┌──────────────────────────────────────────────────────────────┐
│  grid-rows-[auto_1fr_auto] min-h-screen                      │
│                                                              │
│  ┌────────────────────────────────────────────────────────┐  │
│  │  Header (auto)                                         │  │
│  ├────────────────────────────────────────────────────────┤  │
│  │                                                        │  │
│  │  Content (1fr) — fills remaining space                 │  │
│  │                                                        │  │
│  ├────────────────────────────────────────────────────────┤  │
│  │  Footer (auto)                                         │  │
│  └────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────┘

Explicit Placement

┌──────────────────────────────────────────────────────────────┐
│  grid-cols-4                                                 │
│                                                              │
│  col-start-2 col-end-4:                                      │
│  ┌─────────┬─────────────────────┬─────────┐                │
│  │         │  Item placed here   │         │                │
│  │         │  columns 2 and 3    │         │                │
│  └─────────┴─────────────────────┴─────────┘                │
│   Line 1     Line 2       Line 3    Line 4                   │
└──────────────────────────────────────────────────────────────┘

Summary

Item	Value
Container	`grid`, `inline-grid`
Columns	`grid-cols-3`, `grid-cols-12`
Rows	`grid-rows-2`, `grid-rows-[auto_1fr_auto]`
Column span	`col-span-2`, `col-span-full`
Row span	`row-span-2`, `row-span-full`
Explicit column	`col-start-2`, `col-end-4`
Explicit row	`row-start-1`, `row-end-3`
Auto-flow	`grid-flow-row`, `grid-flow-col`, `grid-flow-row-dense`
Gap	`gap-4`, `gap-x-4`, `gap-y-4`
Auto-fit	`grid-cols-[repeat(auto-fit,minmax(250px,1fr))]`
Auto-fill	`grid-cols-[repeat(auto-fill,minmax(200px,1fr))]`
Alignment	`place-items-center`, `justify-self-end`
Responsive	`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`

Key takeaways:

grid establishes a grid container; tracks must be defined. grid-cols-* and grid-rows-* create the tracks. Without them, items stack in a single column.
The default minmax(0, 1fr) prevents tracks from expanding. Content wider than a track would otherwise push the track wider. Tailwind’s defaults prevent this, which is why equal columns work even with long content.
col-span-* and row-span-* make items cross multiple tracks. col-span-full spans the entire grid width. col-start-* and col-end-* place items at specific lines.
auto-fit and auto-fill create responsive grids without media queries. repeat(auto-fit, minmax(250px, 1fr)) fits as many columns as will satisfy the minimum, then stretches them to fill. This is the pattern for card galleries.
grid-flow-row-dense fills gaps but changes visual order. Without dense, a large item leaves a hole that later items do not fill. With dense, the grid backtracks to fill the hole, which changes the visual sequence relative to the DOM. Tab order and screen readers follow the DOM, so dense packing can create a mismatch.
Grid has its own alignment properties. justify-items-* and align-items-* align items within their cells. justify-content-* and align-content-* align the entire grid within its container. place-items-* and place-content-* combine both.
Responsive column counts use breakpoint variants. grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gives one column on mobile, two on small screens, and three on large. This is explicit control; the auto-fit pattern is automatic.

Remember: CSS Grid is the two-dimensional layout system that complements flexbox. Flexbox arranges items along one axis; grid arranges them across rows and columns simultaneously. The container properties define the tracks and the flow. The item properties place items into the tracks, spanning multiple columns or rows when needed. The auto-fit pattern with minmax() creates responsive grids without media queries, which is one of grid’s most useful features. The alignment properties control how items sit within their cells and how the grid sits within its container. Understanding grid means understanding when to use it instead of flexbox: for page layouts with distinct regions, for card galleries where alignment in both directions matters, for dashboards where items have different sizes, and for any design where the two-dimensional structure is the point. Flexbox

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!