Chapter 2.5☕ 16 min read

Advanced CSS Grid Techniques

Auto-placement, alignment, responsive grids, and complex layouts. Grid is the most powerful CSS layout tool.

01Grid Auto-Placement

Control how grid items are automatically placed in the grid using grid-auto-flow and related properties.

🎪

Analogy: Grid auto-placement is like guests finding seats at a Hyderabadi wedding reception — they follow rules to fill available spaces efficiently!

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;           /* All auto-created rows are 100px */
  gap: 1rem;
}

/* grid-auto-flow controls placement direction */
.auto-row    { grid-auto-flow: row; }     /* Default — fill by row */
.auto-column { grid-auto-flow: column; }  /* Fill by column first */
.dense       { grid-auto-flow: dense; }   /* Fill gaps — no empty cells */

/* Item spanning */
.item { grid-column: span 2; }  /* Spans 2 columns */

Important: grid-auto-flow: dense fills holes in the grid but changes visual order. Use it when content order doesn't matter (e.g., image galleries).

02Grid Alignment and Distribution

Align grid items and tracks within the grid container:

PropertyValuesDescription

justify-itemsstretch | start | end | centerAligns items horizontally in their cells (default: stretch).

align-itemsstretch | start | end | centerAligns items vertically in their cells (default: stretch).

place-items<align> <justify>Shorthand: place-items: center centers in both axes.

justify-contentcenter | space-between | etc.Aligns the entire grid horizontally within container.

align-contentcenter | space-between | etc.Aligns the entire grid vertically within container.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 100px);  /* Fixed columns */
  grid-template-rows: repeat(3, 100px);      /* Fixed rows */
  justify-items: center;    /* Center items horizontally */
  align-items: center;      /* Center items vertically */
  justify-content: center;  /* Center the grid horizontally */
  align-content: center;    /* Center the grid vertically */
  height: 100vh;
  gap: 1rem;
}

/* Override per item */
.item:first-child { justify-self: start; align-self: start; }
.item:last-child  { place-self: end; } /* Shorthand */

03Responsive Grid Techniques

Create grids that adapt to different screen sizes without media queries:

/* auto-fit — creates as many columns as fit, expands them */
.auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* auto-fill — creates as many columns as fit, preserves tracks */
.auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Difference: auto-fit collapses empty tracks to 0, auto-fill preserves them */

/* With media queries for more control */
.grid { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

💡

Pro Tip: auto-fit + minmax() is the most powerful responsive grid pattern. No media queries needed for basic responsiveness. Add media queries only when you need to change the number of explicit columns.

04Complex Grid Layouts

Combine multiple grid techniques for sophisticated layouts:

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 60px;
  gap: 1rem;
  height: 100vh;
}

.sidebar {
  grid-column: 1;
  grid-row: 1 / -1;          /* Full height */
  background: #1e293b;
  color: white;
  padding: 1rem;
}

.header {
  grid-column: 2;
  grid-row: 1;
  background: #f97316;
  color: white;
  padding: 1rem;
  display: flex;              /* Nested flexbox for header content */
  align-items: center;
  justify-content: space-between;
}

.main {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

.widget {
  background: #f3f4f6;
  padding: 1.5rem;
  border-radius: 8px;
}

.footer {
  grid-column: 2;
  grid-row: 3;
  background: #8b5cf6;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Overlapping items */
.grid-overlap {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.text-overlay {
  grid-column: 1 / 3;
  grid-row: 1;
  z-index: 2;
  padding: 2rem;
  color: white;
}
.image-background {
  grid-column: 1 / 3;
  grid-row: 1;
  opacity: 0.5;
  z-index: 1;
}

05Exercise — Advanced Grids

Practice advanced grid techniques below.

Create advanced-grid.html.

Build responsive layouts combining multiple techniques:

Try these experiments:

Use grid-auto-flow: dense with items of different sizes — see gaps fill up Create a grid with place-items: center — all items centered in their cells Compare auto-fit vs auto-fill — resize browser and see the difference Build a dashboard layout with sidebar spanning full height + nested flexible main section Create overlapping items using grid placement + z-index

Done — Key Points:

✅ grid-auto-flow: row (default), column, dense. Dense fills holes but changes order.
✅ justify-items/align-items control item alignment within cells. justify-content/align-content control grid alignment.
✅ place-items: center centers items. place-self: end overrides per item.
✅ auto-fit + minmax() = responsive grid pattern. No media queries needed.
✅ auto-fill preserves empty tracks. auto-fit collapses them to 0.
✅ Grid items can overlap using same grid-row/column with z-index control.

Previous2.4 — CSS Grid Layout 📋 All Chapters Next Chapter2.6 — Responsive Web Design →