Lesson 8 of 12
Structured learning draftBuild two-dimensional layouts with Grid
Grid coordinates columns and rows. Track functions allow layouts to respond to available space and content rather than a list of device names. This lesson pairs implementation with repeatable browser evidence so the learner can explain both the result and its limits.
Learning objectives
- Choose Grid for rows and columns.
- Create fluid tracks without device-specific breakpoints.
- Prevent content from forcing tracks wider than the viewport.
Build two-dimensional layouts with Grid
Build two-dimensional layouts with Grid: grid tracks to minmax to auto-fit.
Choose Grid for rows and columns.
Create fluid tracks without device-specific breakpoints.
Prevent content from forcing tracks wider than the viewport.
.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: 1.25rem;
}
.project-card { min-width: 0; }auto-fit creates as many tracks as fit and collapses empty ones. minmax supplies a lower and upper bound. Wrapping the minimum in min(100%, …) prevents it exceeding a narrow container. Grid placement should not create a reading sequence that differs from the source.
| Evidence | Record |
|---|---|
| Source | The exact HTML and CSS tested |
| Environment | Browser, viewport and input method |
| Result | Observed behavior and test outcome |
| Limitation | Unresolved issue and next action |
Common mistakes
- Hard-coding three columns at every width.
- Using Grid ordering to repair incorrect HTML order.
- Forgetting min-width:0 for content that must shrink.
Practice activity
Apply the lesson
Build a project grid that moves from one to multiple columns based on available space. Test at 320px, 400% zoom and with long titles. Submit the source files, test environment, observed result, one failure or boundary case, and a short limitation with the next corrective action.
Check your understanding
What does 1fr represent in a grid track?
Lesson summary
- Grid controls two dimensions.
- Fluid tracks reduce breakpoint code.
- DOM order remains the accessible reading order.
Sources and further reading
- Learn web developmentMDN Web Docs - accessed 2026-09-04
- HTML StandardWHATWG - accessed 2026-09-04
- Page Structure TutorialW3C Web Accessibility Initiative - accessed 2026-09-04
- Web Content Accessibility Guidelines 2.2W3C - accessed 2026-09-04
Personal study note