DEV Community

Atlas Whoff
Atlas Whoff

Posted on

CSS Grid vs Flexbox: When to Use Each in 2026

#frontend #css #javascript #webdev

CSS Grid vs Flexbox: When to Use Each in 2026

The simplest rule: Flexbox for one dimension, Grid for two. But the nuance is worth understanding.

Flexbox: Single Axis 

/* Navigation bar — items in a row */
.nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Push last item to the right */
.nav .logo { margin-right: auto; }

/* Card with content at bottom */
.card {
  display: flex;
  flex-direction: column;
}
.card .content { flex: 1; }  /* Grows to fill space */
.card .footer { margin-top: auto; }  /* Always at bottom */
Enter fullscreen mode Exit fullscreen mode

Grid: Two Dimensions 

/* Product grid — rows AND columns */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* Dashboard layout */
.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
}

.header  { grid-column: 1 / -1; }
.sidebar { grid-row: 2; }
.main    { grid-column: 2; grid-row: 2; }
Enter fullscreen mode Exit fullscreen mode

The Decision Matrix

Layout Need Use
Nav bar Flexbox
Button with icon Flexbox
Card grid Grid
Page layout Grid
Form fields in a row Flexbox
Complex form layout Grid
Center content Either

Centering (Both Work) 

/* Flexbox center */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Grid center */
.container {
  display: grid;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

Tailwind Equivalents 

<!-- Flexbox nav -->
<nav class="flex items-center gap-4">
  <Logo class="mr-auto" />
  <NavLinks />
</nav>

<!-- Grid product list -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  {products.map(p => <ProductCard key={p.id} product={p} />)}
</div>

<!-- Dashboard layout -->
<div class="grid grid-cols-[240px_1fr] grid-rows-[60px_1fr] min-h-screen">
  <Header class="col-span-2" />
  <Sidebar />
  <Main />
</div>
Enter fullscreen mode Exit fullscreen mode

Subgrid (Modern CSS) 

/* Cards in a grid that align their internals */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;  /* Align title/body/cta across cards */
}
Enter fullscreen mode Exit fullscreen mode

The landing page and dashboard in the AI SaaS Starter Kit use Grid for layout and Flexbox for components — fully responsive with Tailwind. $99 at whoffagents.com.

Top comments (0)