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; 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. 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