grid

Basic Syntax

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
    gap: 1rem;
}

The parent becomes a grid container. Children become grid items placed automatically in the defined columns.

Equal Columns with repeat()

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

repeat(3, 1fr) is shorthand for 1fr 1fr 1fr. Three equal columns.

Change the number for different counts:

grid-template-columns: repeat(2, 1fr);  /* 2 columns */
grid-template-columns: repeat(4, 1fr);  /* 4 columns */
grid-template-columns: repeat(6, 1fr);  /* 6 columns */

The Responsive Auto-fit Grid

One line of CSS that replaces dozens of media queries.

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

How it works:

• auto-fit — create as many columns as will fit.
• minmax(250px, 1fr) — each column is at least 250px, growing to fill space.
• No media queries required. The grid responds to the container width automatically.

Spanning Items Across Tracks

/* Span 2 columns */
.featured {
    grid-column: span 2;
}

/* Span 2 rows */
.tall {
    grid-row: span 2;
}

/* Explicit positioning: from column line 1 to column line 3 */
.hero {
    grid-column: 1 / 3;
}

/* Full-width: from the first to the last column line */
.full-width {
    grid-column: 1 / -1;
}

grid-column: 1 / -1 is the "full-width" pattern — the item stretches across every column.

Full Page Layout with Grid

The classic header / sidebar / main / footer layout.

.layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header"
        "sidebar main"
        "footer  footer";
    min-height: 100vh;
    gap: 1rem;
}

.header  { grid-area: header;  }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main;    }
.footer  { grid-area: footer;  }

Named grid areas make complex layouts readable. Change the ASCII diagram to change the layout.

Responsive Stack → Grid

.layout {
    display: grid;
    grid-template-columns: 1fr;  /* Mobile: stack */
    gap: 1rem;
}

@media (min-width: 1024px) {
    .layout {
        grid-template-columns: 250px 1fr;  /* Desktop: sidebar + main */
    }
}