1. Introduction

CSS Grid has revolutionized how we build web layouts.
Forget floats, complex flexbox hacks, or fragile table layouts — Grid gives you full 2D control over your design.

Once you master its core concepts, you'll wonder how you ever lived without it.

2. Grid Container and Items

Every grid starts with a container and its items.

Set display: grid on the parent → all direct children become grid items.

.container {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 1rem;}

Pro tip: Only direct children are grid items. Nested elements? Use a new grid inside.

3. The fr Unit

The fr unit = fraction of available space.

grid-template-columns: 1fr 2fr;

→ First column: 1 part
→ Second column: 2 parts → twice as wide

grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */grid-template-columns: 2fr 1fr;      /* 2:1 ratio */

4. Grid Lines and Positioning

Grid creates numbered lines around cells.

Use grid-column and grid-row to place items anywhere.

.hero {  grid-column: 1 / 3;   /* span from line 1 to line 3 */  grid-row: 1 / 2;}

Use span 2 to span across 2 columns/rows:

grid-column: span 2;

5. Named Grid Areas

Define your layout visually with grid-template-areas.

.container {  display: grid;  grid-template-areas:      "header header"      "sidebar main"      "footer footer";  grid-template-columns: 250px 1fr;  grid-template-rows: auto 1fr auto;}

Then assign items:

<header style="grid-area: header">...</header><aside style="grid-area: sidebar">...</aside><main style="grid-area: main">...</main><footer style="grid-area: footer">...</footer>

Self-documenting layout — anyone can read it like a blueprint!

6. Responsive Design

Change your grid at different breakpoints.

.container {  display: grid;  grid-template-columns: 1fr;  gap: 1rem;}/* Tablet & up */@media (min-width: 768px) {  .container {      grid-template-columns: 1fr 1fr;  }}

7. Auto-Placement

The browser automatically places items if you don't specify.

Control flow with grid-auto-flow:

grid-auto-flow: column;     /* fill columns first */grid-auto-flow: dense;      /* fill gaps intelligently */

Set default size for auto-created rows/columns:

grid-auto-rows: minmax(100px, auto);

8. Common Patterns

8.1 Holy Grail Layout

.layout {  display: grid;  grid-template-areas:      "header header header"      "nav    main   aside"      "footer footer footer";  grid-template-rows: auto 1fr auto;  grid-template-columns: 200px 1fr 200px;  min-height: 100vh;}

8.2 Card Grid (Responsive)

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

→ Automatically wraps, never too narrow, never too wide.

9. Common Mistakes

<div class="grid"><div class="item">...</div><p>Nested text here</p> <!-- Not a grid item! --></div>

Only direct children are grid items. Wrap content in a child if needed.

10. Testing Checklist

• Does your layout use display: grid?
• Are columns defined with fr or minmax()?
• Did you test on mobile, tablet, desktop?
• Are named areas clear and semantic?
• Did you use gap instead of margins?

11. Conclusion

CSS Grid isn't just a layout tool — it's a superpower.

With fr units, named areas, and auto-placement, you can build complex, responsive layouts in minutes, not hours.

Stop fighting with floats.
Stop nesting flexboxes.
Start thinking in grids.

Your future self (and your teammates) will thank you.

Written by Maria Garcia

#CSS #WebDesign #Frontend #GridLayout #Responsive