CSS Grid Advanced

Introduction

CSS Grid can build extremely advanced layouts — complex grids, overlapping elements, named areas, auto-placement, masonry-like layouts, and responsive designs with almost no media queries. This tutorial covers the advanced techniques professionals use.

1. Named Grid Areas

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  gap: 15px;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: content; }
footer { grid-area: footer; }

2. Repeat + Minmax

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

Perfect for responsive cards.

3. Overlapping Grid Items

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

4. Explicit vs. Implicit Grids

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px;
}

Extra content fills implicit rows automatically.

5. Auto-Fit vs Auto-Fill

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

auto-fit collapses empty columns, auto-fill keeps the empty tracks.

6. Masonry Layout (Modern CSS Grid Level 3)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
}

Create Pinterest-style layouts (supported in modern browsers).

7. Aligning Content

.grid {
  align-items: center;
  justify-items: center;
}

8. Grid Item Self-Alignment

.item {
  justify-self: start;
  align-self: end;
}

9. The Subgrid Feature

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
}

Subgrid inherits parent tracks → perfect for nested layouts.

10. Fraction Units + Max-Content

grid-template-columns: max-content 1fr;

11. Grid Template Shorthand

grid:
  "header header" 80px
  "sidebar content" auto
  "footer footer" 60px
  / 200px 1fr;

12. Responsive Grid Without Media Queries

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

13. Using gap Instead of margins

.grid {
  gap: 24px;
}

14. Spanning Multiple Rows Dynamically

.item {
  grid-row: span 2;
}

15. Grid Performance Tips

Summary