CSS Grid

CSS Grid: Two-Dimensional Rows, Columns, and Page Layouts

CSS Grid is a two-dimensional layout system that controls both columns and rows simultaneously. Where Flexbox excels at single-axis toolbars and lists, CSS Grid lets you build full application shells, dashboard card grids, and magazine layouts with minimal markup and zero wrapper clutter.

flowchart TD
    GC["Grid Container (display: grid)"] --> Cols["grid-template-columns (fr, px, minmax)"]
    GC --> Rows["grid-template-rows / auto-rows"]
    GC --> Gap["gap (row-gap & column-gap)"]
    GC --> Areas["grid-template-areas (Named layout zones)"]

Core Grid Units and Functions

• fr (Fractional Unit): Divides remaining free space proportionally (1fr 2fr makes the second column twice as wide as the first).
• repeat(count, track): Avoids repeating identical tracks (repeat(3, 1fr)).
• minmax(min, max): Bounds track width safely so cards never crush narrower than readable widths.
• gap: Adds spacing between rows and columns (gap: 20px; or 16px 24px).
• grid-column: span 2: Lets featured cards span across two grid columns cleanly.

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.page-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "sidebar main";
    gap: 20px;
}

.page-shell header { grid-area: header; }
.page-shell aside  { grid-area: sidebar; }
.page-shell main   { grid-area: main; }

Common Mistakes to Avoid

• Using 1fr without minmax(0, 1fr) when columns hold pre code blocks: Bare 1fr behaves like minmax(auto, 1fr), allowing wide code blocks to push columns off screen; minmax(0, 1fr) keeps tracks strictly bounded.
• Reordering visual grid cards away from HTML DOM order: Screen readers and keyboard Tab order follow HTML source order, not visual order or grid-area placement.
• Setting rigid grid-template-columns: repeat(4, 1fr) without mobile breakpoints: Four narrow columns crush text on 375px phones unless you use auto-fit or a media query.

Frequently Asked Questions

Can I nest a Flexbox container inside a CSS Grid item?

Yes! Combining CSS Grid for the overall 2D page skeleton and Flexbox inside each card (for aligned buttons or icons) is standard modern practice.

How does grid-template-areas simplify responsive changes?

You can define "header" "main" "sidebar" in mobile styles and switch to "header header" "sidebar main" inside a media query without touching a single HTML tag.