Frontend Master

JavaScript Curriculum

CSS Grid
+65 XP

CSS Grid

medium
~35 min·65 XP

The coffee shop needs a real page layout — header spanning the full width, sidebar for categories, main content area, and a footer. Grid makes this a 10-line CSS solution.

CSS Grid

CSS Grid is a two-dimensional layout system — it handles rows and columns simultaneously. Where Flexbox thinks in one direction at a time, Grid thinks in both at once. It's the right tool for full-page layouts, photo galleries, dashboards, and any design with a defined structure.

grid-template-columns and rows

The foundation of Grid: define your column and row tracks, then let items flow in:

grid-template.css
grid-template-columns
grid-template-rows
gap
12px
cells
1
2
3
4
5
6
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
ℹ️The fr unit
fr stands for "fraction of available space." 1fr 1fr 1fr creates three equal columns — each takes ⅓ of the container. 2fr 1fr creates two columns where the first is twice as wide as the second. fr units are Grid-exclusive and the cleanest way to create proportional layouts.

Placing Items on the Grid

Grid items can be placed automatically or precisely positioned using line numbers, spans, or named areas:

grid-placement.css

By default, Grid places items automatically — left to right, top to bottom. No placement rules needed.

1
2
3
4
5
6
.1 { /* auto placed */ }
.2 { /* auto placed */ }
.3 { /* auto placed */ }
.4 { /* auto placed */ }
.5 { /* auto placed */ }
.6 { /* auto placed */ }
💡grid-template-areas is the most readable approach
For full-page layouts, named grid areas beat line numbers every time. You can literally draw your layout in CSS. The visual ASCII art in grid-template-areas makes the intent obvious at a glance — a massive maintainability win.

Grid vs Flexbox — Choosing the Right Tool

Both tools overlap, but each has a clear home territory:

grid-vs-flex.css1/5
Layout challenge

A horizontal navbar with logo, links, and a CTA button

ℹ️They work great together
You don't have to choose between Grid and Flex for the whole page. Use Grid for the macro layout (header, sidebar, main, footer). Use Flexbox inside components (nav items, card contents, button groups). They compose perfectly.

Your Challenge

Build the full coffee shop page layout using CSS Grid with named template areas.

Challenge

Build a full page layout using CSS Grid with named areas: header spanning full width, a sidebar (200px) and main content side by side, and a footer spanning full width. Use grid-template-areas to define the layout and grid-area on each element.

css-gridgrid-template-columnsgrid-template-rowsgrid-template-areasgrid-areagrid-columngrid-rowspangapfrrepeatauto-fillauto-fitminmax
CSS Grid | Nexus Learn