Place the boxes with Grid
Write display: grid and grid-template-columns on the container to drop the boxes into their cells. What you type shows up live instantly.
Task: Create 3 equal columns
See every Grid property live on real boxes: how the cell system is built and what changes. Then move on to «Practice».
The cell system starts here
Give the container display: grid and it becomes a cell system, with the boxes (grid items) laid out across rows and columns. Flexbox is one-axis, while Grid is two-dimensional (rows + columns).
.maydon { display: grid; }
Defining columns
grid-template-columns sets how many columns there are and how wide each one is. 1fr = one share of the free space. repeat(3, 1fr) = three equal columns. You can mix them too: 100px 1fr.
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(3, 1fr);
Defining rows
grid-template-rows sets the height of the rows. If you don't set it, rows are created automatically (based on content). 1fr 1fr splits the full height equally between two rows.
grid-template-rows: 1fr 1fr; grid-template-rows: 80px 120px;
Space between cells
gap puts equal spacing between the cells. If you want to control them separately: column-gap (between columns) and row-gap (between rows).
gap: 16px; column-gap: 24px; row-gap: 8px;
Horizontal placement inside a cell
justify-items aligns each box horizontally (left-right) inside its own cell: start, center, end. The default value is stretch.
justify-items: center; justify-items: end;
Vertical placement inside a cell
align-items aligns the boxes vertically (top-bottom) inside the cell: start, center, end. Both at once: place-items: center = centered both horizontally and vertically.
align-items: center; place-items: center;
Placing the whole cell system
If the cells are smaller than the container, justify-content places the whole system horizontally, while align-content does it vertically. This differs from justify-items: it moves the entire set, not an individual box.
justify-content: center; align-content: space-between;
Spanning several cells
grid-column is a box property: it sets how many columns it takes up. span 2 = two columns wide. For rows, grid-row: span 2. You can also use line numbers: grid-column: 1 / 3.
.quti1 { grid-column: span 2; }
Into exactly the right cell
Grid lines are numbered starting from 1. To place a box in one exact cell, give grid-column and grid-row together. grid-column: 3 and grid-row: 2 = column 3, row 2.
.quti1 { grid-column: 3; grid-row: 2; }
Layout by naming cells
grid-template-areas names the cells and draws the whole page layout visually. Each element gets grid-area: name, and the container writes the rows out like text. Header, sidebar, and footer are built this way.
grid-template-areas: "hd hd" "sd mn" "ft ft";
Ready? 🎯
Now put your knowledge to the test: across 20 practice levels you write code to drop the boxes into their cells.
Awesome!
The boxes landed in their cells.