CSS Grid Deep Dive

Difficulty: Intermediate

Question

Explain CSS Grid in depth. When should you use Grid vs Flexbox?

Answer

CSS Grid is a 2-dimensional layout system controlling both rows and columns simultaneously.

Grid vs Flexbox: - Grid: 2D (rows AND columns), good for page layouts and complex grids - Flexbox: 1D (row OR column), good for component layouts and alignment

Key concepts: - Explicit grid: defined with grid-template-columns/rows - Implicit grid: auto-created for extra items - fr unit: fraction of available space - Grid lines: numbered lines between tracks - Grid areas: named regions for placement

Code examples

Grid Template and Placement

/* Define a grid */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  min-height: 100vh;
}

/* Place items by line numbers */
.header {
  grid-column: 1 / -1; /* span all columns */
  /* -1 means last line */
}
.sidebar {
  grid-column: 1;
  grid-row: 2;
}
.content {
  grid-column: 2 / 4; /* columns 2-3 */
  grid-row: 2;
}
.footer {
  grid-column: 1 / -1;
  grid-row: 3;
}

/* Shorthand: grid-area: row-start / col-start / row-end / col-end */
.item {
  grid-area: 2 / 2 / 3 / 4;
}

Grid lines are numbered starting at 1. Use -1 for the last line. grid-column: 1 / -1 spans the entire width.

Grid Template Areas

.layout {
  display: grid;
  grid-template-columns: 250px 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  gap: 1rem;
  min-height: 100vh;
}

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

/* Responsive: stack on mobile */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
  }
}

Grid template areas are the most readable way to define layouts. Each string is a row, each word is a column. Repeat a name to span cells.

Auto-fill Responsive Grid

/* Auto-fill: responsive without media queries */
.card-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* Cards are min 280px, grow to fill row */
/* auto-fill creates empty tracks */
/* auto-fit collapses empty tracks */

/* Dense packing (fills gaps) */
.masonry-like {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 1rem;
}
.wide { grid-column: span 2; }
.tall { grid-row: span 2; }

/* Alignment in grid */
.grid {
  /* Align all items */
  justify-items: center; /* horizontal */
  align-items: center;   /* vertical */

  /* Align the grid itself */
  justify-content: center;
  align-content: center;
}

repeat(auto-fill, minmax(280px, 1fr)) is the most powerful one-liner in CSS Grid - a fully responsive card grid with no media queries.

Key points

• auto-fill creates empty tracks, auto-fit collapses them - use auto-fill for consistent sizing
• fr unit distributes free space AFTER fixed and min-content tracks are sized
• Grid items can overlap - use z-index to control stacking

Concepts covered

CSS Grid, Grid Template, Grid Areas, Auto-fill, Subgrid, Alignment