CSS Grid

CSS Grid is for two-dimensional layouts: rows AND columns at the same time. Perfect for page layouts, dashboards, and card grids. Flexbox is one direction. Grid is both directions.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  grid-template-rows: auto;
  gap: 24px;
}

/* Span across columns */
.featured {
  grid-column: span 2;
}