Command Palette

Search for a command to run...

Hectal
Phase 8Intermediate9 of 12 in CSS

CSS Grid

Two-dimensional layout with CSS Grid: tracks and fr, repeat and minmax, auto-fit galleries, line placement, named areas, alignment, subgrid, and when to pick Flexbox.

Flexbox (Phase 7) lays things out along one line at a time. CSS Grid lays them out in rows and columns at the same time, like a table drawn with invisible lines. You describe the grid on the parent, and the children drop into its cells, or go exactly where you tell them.

You'll start with columns, rows, the fr unit and gap, then build grids that adapt by themselves with repeat(), minmax() and auto-fit. Next you'll place items by line numbers, spans and negative lines, draw whole page layouts as text with grid-template-areas, and align everything inside cells and inside the container.

The phase ends with subgrid, which lets cards line up their titles and buttons across a row, and a clear way to decide between Grid and Flexbox. Every example is live, and the computed values in the console show you exactly what the browser worked out.

0/6 · 0%
6 topics ~3 h 24 code blocks & diagrams
Start with the first topic
1
8.1

Grid Basics

display: grid turns an element into a grid container; grid-template-columns and grid-template-rows draw its tracks, the fr unit shares out leftover space, and gap puts gutters between tracks, while the children fill the cells in order.

28 min 1 diagram 3 code practice

2
8.2

repeat, minmax and Auto Tracks

repeat() writes many tracks at once, minmax() gives a track a smallest and largest size, auto-fill and auto-fit let the grid choose how many columns fit, and grid-auto-rows, grid-auto-columns and grid-auto-flow control the extra tracks the grid creates on its own.

28 min 1 diagram 3 code practice

3
8.3

Placing Items

You place a grid item by naming the lines it starts and ends on (grid-column: 1 / 3), by saying how many tracks it spans (span 2), or by counting from the end with negative numbers (1 / -1); items may overlap, and later items or a higher z-index paint on top.

29 min 1 diagram 3 code practice

4
8.4

Template Areas

grid-template-areas lets you draw a layout as text, one quoted string per row and one name per cell; each item then joins its area with grid-area: name, and changing the drawing in a media query rearranges the whole page.

26 min 1 diagram 3 code practice

5
8.5

Aligning in Grid

justify-* aligns along the row (inline) axis and align-* along the column (block) axis; -items and -self move items inside their grid areas, -content moves the whole set of tracks inside the container, and place-* sets both axes at once.

27 min 1 diagram 3 code practice

6
8.6

Subgrid, and Grid vs Flexbox

subgrid lets a nested grid reuse its parent's tracks, so titles, text and buttons line up across separate cards; and Grid (two-dimensional, layout first) and Flexbox (one-dimensional, content first) solve different problems and work best together.

28 min 1 diagram 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Three equal columns

Turn .grid into a grid with three equal columns and a 16px gap between rows and between columns.

Beginner
2

Place a banner and a featured tile

The gallery grid is already set up: 4 columns, 80px rows, 16px gaps.

Intermediate
3

A page layout with template areas

Use grid-template-areas to lay out the page:

Intermediate
4

A gallery that picks its own column count

Make .gallery a grid whose columns are at least 150px wide, share any extra space, and change in number automatically as the gallery gets wider or narrower. Use a 16px gap. No media queries.

Intermediate
5

Pricing cards that line up

Three pricing plans sit side by side, but one plan name wraps onto two lines and the feature lists have different lengths, so the lists and the buttons don't line up.

Advanced