Paths/Frontend Engineer/CSS & Design Systems / Layout & Typography
Build a Layout with Grid
Grid and flexbox are two different tools. Use grid for the page skeleton and flexbox for the row inside it.
Validator
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- Directory ~/frontend/src/styles exists○
- File ~/frontend/src/styles/layout.css exists○
- The file declares a grid layout with columns and a gap○
- The file uses flexbox for the row layout○
02Walkthrough
3 steps- 01
Write the page grid
grid-template-columns with a repeat defines the skeleton, and gap keeps the spacing consistent without margins.
echo '.page {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n gap: 16px;\n padding: 24px;\n}' > ~/frontend/src/styles/layout.css - 02
Add the row layout
Flexbox is for one dimension - a row of items that should align and wrap.
echo '\n\n.row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n}' >> ~/frontend/src/styles/layout.css - 03
Verify and submit
cat the file, then submit for validation.
cat ~/frontend/src/styles/layout.css
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list