GridLesson 314Free preview
Mixed Column Layout
This lesson is part of How To · All levels
Summary
The mixed column layout combines several column widths into a single page, for example the main content is wide with a narrow sidebar and then a full-width section below it. The CSS Grid with grid-template-area facilitates area naming so that the layout remains easy to read and modify. On a small screen, all areas can be stacked into one column.
Key points
- Use grid-template-area to map the position of each part
- Areas can have different ratios like 2fr for the main and 1fr for the sidebar
- Grid-column: 1 / -1 makes the element stretch full
- Media query changes the area layout to one column on the phone
- Minmax(0, 1fr) helps prevent long content from forcing columns to expand
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.