Mastering CSS Grid & Flexbox in 2026

CSS Grid vs Flexbox — Know the Difference

Both layout systems are powerful, but they solve different problems. Flexbox is one-dimensional (row OR column). CSS Grid is two-dimensional (rows AND columns).

Flexbox Cheat Sheet

/* Flex container */
.container {
  display: flex;
  flex-direction: row;       /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;           /* nowrap | wrap | wrap-reverse */
  justify-content: center;   /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  align-items: center;       /* flex-start | flex-end | center | stretch | baseline */
  gap: 16px;                 /* shorthand for row-gap + column-gap */
}

/* Flex items */
.item {
  flex: 1 1 200px;  /* grow | shrink | basis */
  order: 2;         /* change visual order */
  align-self: flex-start; /* override align-items for this item */
}

CSS Grid Cheat Sheet

/* Grid container */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  grid-template-rows: auto 1fr auto;      /* header, main, footer */
  gap: 24px;
  grid-template-areas:
    "header header header"
    "sidebar main   main"
    "footer  footer footer";
}

/* Grid items */
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Responsive without media queries! */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

Real-World Layout: Full Page

<!-- index.html -->
<div class="page-layout">
  <header class="page-header">Navigation</header>
  <aside class="page-sidebar">Sidebar</aside>
  <main class="page-main">Content</main>
  <footer class="page-footer">Footer</footer>
</div>

/* style.css */
.page-layout {
  display: grid;
  min-height: 100vh;
  grid-template:
    "header header" 64px
    "sidebar main"  1fr
    "footer footer" auto
    / 280px 1fr;
}

@media (max-width: 768px) {
  .page-layout {
    grid-template:
      "header"  64px
      "main"    1fr
      "sidebar" auto
      "footer"  auto
      / 1fr;
  }
}

💡 Pro Tip: Use grid-template-areas for complex layouts — it makes your CSS self-documenting and much easier to maintain.

Container Queries (2026 Standard)

Container queries let components respond to their container size, not the viewport:

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 140px 1fr;
  }
}

This is a game-changer for component-driven design — your card can adapt whether it’s in a narrow sidebar or a wide grid.