Complete Guide to CSS Grid and Flexbox in 2026: When to Use Each

CSS Grid and Flexbox are the two most powerful layout tools in modern CSS, and the most common question I hear is: "Which one should I use?". The short answer: they're not competitors — they're complementary. Flexbox for one dimension, Grid for two dimensions. Let me show you exactly when to use each with real-world examples.

Flexbox: one-dimensional layout

Flexbox distributes items along a single axis — horizontal or vertical. Perfect for navbars, button groups, and aligning items within components.

Essential container properties

.container {
  display: flex;
  flex-direction: row;            /* or column */
  justify-content: space-between; /* main axis alignment */
  align-items: center;            /* cross axis alignment */
  flex-wrap: wrap;                /* allow line breaks */
  gap: 1rem;                      /* spacing between items */
}

Item properties

.item {
  flex: 1 0 200px;    /* grow | shrink | basis */
  align-self: flex-end; /* override container alignment */
}

Example: Responsive navbar

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

@media (max-width: 768px) {
  .navbar { flex-direction: column; gap: 1rem; }
}

Example: Card with footer pinned to bottom

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-body { flex: 1; }
.card-footer { margin-top: auto; }

CSS Grid: two-dimensional layout

Grid controls rows and columns simultaneously. Ideal for page layouts, dashboards, and galleries.

Essential container properties

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* auto-responsive */
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem;

  /* Named areas */
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
}

Example: Full page layout

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

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

@media (max-width: 768px) {
  .page-layout {
    grid-template-areas: "header" "content" "sidebar" "footer";
    grid-template-columns: 1fr;
  }
}

Example: Auto-responsive image gallery

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

This creates columns that automatically adapt — 4 on desktop, 2 on tablet, 1 on mobile — without a single media query. Learn more about the repeat() function on MDN.

Grid + Flexbox together

The real power comes from combining Grid for page layout and Flexbox for component internals:

/* Grid for the page layout */
.page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Flexbox for each card */
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.card-body { flex: 1; padding: 1.5rem; }

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  margin-top: auto;
}

Comparison table

Common mistakes to avoid

1. Using Grid for everything: If you just need items in a row, Flexbox is simpler.
2. Forgetting min-width: 0: Flex/Grid items won't shrink past their content minimum. Add min-width: 0 if you have overflow issues.
3. Not using gap: Avoid margins for spacing inside flex/grid containers.
4. Unnecessary media queries: Try auto-fit + minmax() before writing breakpoints.
5. Percentages in Grid: Use fr instead — it respects gap, percentages don't.

Resources

• A Complete Guide to Flexbox — CSS-Tricks
• A Complete Guide to CSS Grid — CSS-Tricks
• Flexbox Froggy — Interactive game to practice
• Grid Garden — Interactive Grid practice
• MDN: CSS Grid Layout