Modern CSS Techniques: Grid, Flexbox, and Beyond

CSS Grid: Two-Dimensional Layouts

CSS Grid is the gold standard for two-dimensional layouts. It handles both rows and columns simultaneously, making complex page layouts straightforward.

.dashboard {
  display: grid;
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Flexbox: One-Dimensional Alignment

Flexbox excels at distributing space along a single axis. Use it for navigation bars, card rows, centering content, and any pattern where items flow in one direction.

Container Queries

Container queries let components respond to their container's size rather than the viewport. This is transformative for building truly reusable, context-aware components.

New CSS Features Worth Learning

• :has() — the parent selector CSS always needed
• color-mix() — blend colors natively in CSS
• Cascade layers (@layer) — manage specificity at scale
• Nesting — write cleaner, more organized stylesheets
• View transitions — smooth page transitions natively