CSS - Grid

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 25–35 minutes

Grid provides two-dimensional layout control for complex, responsive designs.

Learning Objectives

• Create explicit grids with tracks using repeat() and fr units.
• Build responsive grids with auto-fit/auto-fill and minmax().
• Use grid areas for semantic layout naming.

Details & Examples

.gallery{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.header{ display:grid; grid-template-areas: "brand nav"; align-items:center; }
.brand{ grid-area: brand; }
.nav{ grid-area: nav; justify-self:end; }

Try it

Common Pitfalls

• Mixing implicit and explicit tracks unintentionally—inspect grid overlays in DevTools.

Checks for Understanding

1. What’s the difference between auto-fit and auto-fill?

Exercises

1. Create a responsive gallery using repeat(auto-fit, minmax(220px, 1fr)) and add gaps.
2. Define named grid areas for a header, sidebar, main, and footer layout; rearrange areas for narrow screens.