OnlineCBT
Name regions to describe a page layout
grid-template-areas gives readable names to rectangular regions. Each quoted row describes cells; repeated names join into an area. Every named area must form one rectangle, and each row must contain the same number of cells.
.page {
display: grid;
grid-template-columns: 14rem minmax(0, 1fr);
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
gap: 1rem;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; min-width: 0; }
.footer { grid-area: footer; }Apply these classes to four direct children. The header and footer span both columns; sidebar and main occupy separate cells in the middle row. A dot can represent an unnamed empty cell.
Change the map for narrow screens
@media (max-width: 45rem) {
.page {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}The same elements now occupy a single column. Keep source order sensible: CSS placement changes the visual layout but does not automatically rewrite reading or focus order. If main content should precede the sidebar semantically, write the HTML accordingly.
Common errors
A nonrectangular area, inconsistent cell counts or a misspelled area name can invalidate the layout or place an item unexpectedly. Area names are identifiers; use clear names and keep the template and item declarations synchronized.
When areas help
Named areas are useful for a small set of stable page regions. For a large automatically generated catalogue, repeated tracks and auto-placement are often simpler. Choose the layout description that makes future edits understandable.
Exercises
- Add a notices region above main and decide whether it should span one or both columns.
- Deliberately create an L-shaped repeated name and inspect why it is invalid.
- Test the mobile map at 200% zoom and with long sidebar content.
- Compare the DOM order with visual order using keyboard navigation.
