CSS Grid

Grid handles 2-D layout — rows and columns together. The right tool for dashboards, magazine layouts, and complex page templates.

Gridlayoutresponsivetemplate-areas

Duration

⏱ About 2 hours

Level

📊 Beginner+

Prerequisite

🎯 css-05

OUTCOME

Compose complex layouts without nested div soup

What you'll learn

1Define columns and rows with grid-template-columns/rows
2Use fr units and minmax() for responsive sizing
3Lay out with grid-template-areas (named regions)
4Build responsive card grids with auto-fit and minmax

1. A Basic Grid

css

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  gap: 16px;
}

1fr means "1 fraction of available space". repeat(3, 1fr) is shorthand for 1fr 1fr 1fr.

2. Auto-fit + minmax (responsive grid)

css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
/* As many columns as fit, each at least 240px wide */

💡

This single rule replaces a whole set of media queries — the grid reflows automatically.

3. Template Areas (Layout)

css

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr 48px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}
.app > header  { grid-area: header; }
.app > nav     { grid-area: sidebar; }
.app > main    { grid-area: main; }
.app > footer  { grid-area: footer; }

4. Placing Items by Line

css

.feature {
  grid-column: 1 / span 2;   /* start at line 1, span 2 columns */
  grid-row: 2 / 4;           /* from row line 2 to row line 4 */
}

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗