The classic page, as named areas in HTML & CSS

HTML & CSS interview exercise on Grid, difficulty 2 of 3. Solve it in the editor beside a worked example, or cold in Interview mode with the example hidden; the tests run the moment you do.

Build the layout with grid-template-areas: the header across the whole top, then a row with the nav (180px) on the left, the main content in the middle taking the rest, and the aside (220px) on the right, then the footer across the whole bottom. 12px gaps. The source order stays as it is; the areas place things.

Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Interview mode hides the example: solve it from memory, without the hint or the solution, and it counts as solved cold. Progress is saved in your browser, and in your account if you sign in.

More Grid in HTML & CSS

All HTML & CSS exercises · Other languages and frameworks