CSS Grid Layout Guide

What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you control columns and rows simultaneously.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

Defining Columns and Rows

.container {
    grid-template-columns: 200px 1fr 2fr;
    grid-template-rows: auto 1fr auto;
}

• fr — fractional unit, distributes available space
• auto — sized by content
• Fixed units like px, %, rem

The repeat() Function

.container {
    grid-template-columns: repeat(3, 1fr);
}
/* Same as: 1fr 1fr 1fr */

Placing Items

.header {
    grid-column: 1 / -1; /* span all columns */
}
.sidebar {
    grid-row: 2 / 4;
}
.main {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

Grid Areas

.container {
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Responsive Patterns

Auto-fill with minmax

.container {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

This creates as many 250px+ columns as will fit — no media queries needed.

Grid vs Flexbox

• Flexbox: one-dimensional (row or column)
• Grid: two-dimensional (rows and columns together)

Use Grid for page layouts, Flexbox for component-level alignment.