Tutorials › CSS Mastery › CSS Grid

CSS Grid

7 min read Quiz at the end

CSS Grid creates two-dimensional layouts. Set display: grid and define columns with grid-template-columns: repeat(3, 1fr). gap adds space between all cells. Items span multiple columns with grid-column: span 2.

CSS Grid

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 equal cols */
    grid-template-rows: auto 1fr auto;       /* header/main/footer */
    gap: 24px;
}

/* Named areas */
.container {
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

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

← Flexbox Next: Positioning →

Topic Quiz · 5 questions

Test your understanding before moving on

1. grid-template-columns: repeat(3, 1fr) creates:

💡 repeat(3, 1fr) creates 3 columns each taking 1 fraction of available space.

2. What does gap do?

💡 gap sets the gutter space between rows and columns in Grid (and Flexbox).

3. grid-area is used with:

💡 grid-area names a grid item for placement with grid-template-areas.

4. auto-fill vs auto-fit?

💡 auto-fill keeps empty tracks; auto-fit collapses them so items expand to fill space.

5. Which creates a responsive grid without media queries?

💡 repeat(auto-fill, minmax(250px, 1fr)) creates a responsive multi-column grid automatically.

Quick Access

CSS Grid

CSS Grid

Test your understanding before moving on