Getting to Know CSS Grid Layout – A Comprehensive Guide

CSS Grid Layout is the most important layout method after Flexbox, allowing developers to define container spacing, size, and alignment without relying on hacks, frameworks, or media queries. It simplifies horizontal and vertical centering and adapts automatically to available space.

Minimum Requirements – Although Grid introduces new syntax, a brief overview is enough to start building layouts with examples of essential concepts.

Browser Compatibility – Grid is supported from Safari 10.1, Firefox 52, Opera 44, Chrome 57, and Edge 15. Older browsers (IE10‑11, Edge 13‑14) have limited implementations; using @supports (display: grid) helps provide fallbacks.

@supports (display: grid) {
    .grid {
        display: grid;
    }
}

To demonstrate a two‑column grid with a gutter, use grid-template-columns and grid-gap :

.grid {
    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-gap: 1rem;
}

When the gutter adds to the total width (e.g., 100vw + 1rem ), horizontal scrolling can occur. Using fractional units ( fr ) solves this:

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

Content Alignment – Grid offers four alignment values ( start , center , end , stretch ) for items on a track. Example for centering both horizontally and vertically:

.center-content {
    display: grid;
    align-items: center;
    justify-content: center;
}

Legacy Grid Support – Older implementations lack grid-gap and require explicit placement of each item. Example using the Microsoft prefixed syntax:

.grid-legacy {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1rem 1fr; /* replaces gap */
}
.grid-legacy:first-child { -ms-grid-column: 1; }
.grid-legacy:last-child { -ms-grid-column: 3; }

For full‑height layouts in legacy browsers, the minmax function can define rows:

-ms-grid-rows: minmax(100vh, 1fr);

Creating Padding (Negative Space) – Use grid-column-start to shift an item, effectively creating internal padding without extra markup.

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.child {
    grid-column-start: 2;
}

Firefox 52 has a vertical‑alignment quirk with fr rows; applying grid-template-rows: minmax(100vh, 1fr) resolves it.

.l-grid--full-height {
    grid-template-rows: minmax(100vh, 1fr);
}

Creating Empty Space – By starting an item at a later column (e.g., grid-column-start: 2 ) you can leave preceding tracks empty, useful for designing gaps without extra elements.

Rows – Define rows similarly to columns:

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 250px 250px;
}

If content exceeds the fixed row height, it overflows; using minmax provides flexible sizing:

.grid {
    grid-template-rows: minmax(250px, auto) minmax(250px, auto);
}

Complex Grids – Items can span multiple tracks using grid-column-start / grid-column-end or the shorthand grid-column: 1 / 3 . The span keyword offers a modular approach:

.span-column-3 { grid-column-start: span 3; }

Responsive Grids without Media Queries – Combine repeat() with auto-fit or auto-fill and minmax() to let the grid automatically adjust the number of columns based on available space:

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

auto-fit fills the row with as many columns as fit, leaving empty space when insufficient; auto-fill creates as many tracks as possible and stretches them to occupy remaining space, similar to Flexbox behavior.

In summary, CSS Grid Layout replaces decades of float‑based techniques, offering a powerful, flexible, and concise way to build modern web layouts with far less code and without heavy reliance on frameworks.