CSS Flexbox vs Grid: The Interview Question That Reveals Your CSS Skills

Flexbox and Grid have 97%+ browser support and appear in virtually every modern codebase—yet "centering a div" remains a running joke in frontend development. The real question interviewers ask isn't whether you can use these tools, but whether you understand which one to reach for and why. Here's how to nail this question.

The 30-Second Answer

When the interviewer asks "What's the difference between Flexbox and Grid?", here's your concise answer:

"Flexbox is one-dimensional - it handles layout in a row OR column. Grid is two-dimensional - it handles rows AND columns at the same time. I use Flexbox for components like navbars, button groups, and centering. I use Grid for page layouts and anything that needs alignment in both directions, like dashboards or galleries."

That's it. Wait for follow-up questions.

The 2-Minute Answer (If They Want More)

If they ask you to elaborate:

"The key difference is dimensionality. Flexbox works along a single axis - you choose horizontal or vertical, and items flow along that axis. It's content-driven, meaning the size of items affects the layout.

Grid works on two axes simultaneously. You define rows and columns upfront, creating a structure that items are placed into. It's layout-driven.

In practice, I use Flexbox for:

• Navigation menus
• Centering content
• Card layouts (the content inside)
• Spacing items in a row or column

I use Grid for:

• Page-level layouts
• Image galleries
• Dashboards
• Any design with clear rows and columns

They're not mutually exclusive - I often use Grid for the page layout and Flexbox for components within it."

Code Examples to Show

Flexbox - Centering (Most Common Interview Question)

/* Center horizontally and vertically */
.container {
  display: flex;
  justify-content: center;  /* Main axis (horizontal) */
  align-items: center;      /* Cross axis (vertical) */
  height: 100vh;
}
 
/* Center only horizontally */
.container {
  display: flex;
  justify-content: center;
}
 
/* Center only vertically */
.container {
  display: flex;
  align-items: center;
  height: 300px;
}

Flexbox - Navigation Bar

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

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

Grid - Basic Page Layout

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
 
.header { grid-column: 1 / -1; }  /* Span full width */
.sidebar { grid-row: 2; }
.main { grid-row: 2; }
.footer { grid-column: 1 / -1; }

Grid - Responsive Gallery (No Media Queries!)

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

This is one of the most powerful CSS patterns - columns automatically adjust based on available space.

The Classic Problem: The Holy Grail Layout

Interviewers love asking candidates to build this layout:

┌────────────────────────────────┐
│            Header              │
├────────┬──────────────┬────────┤
│        │              │        │
│ Side   │    Main      │  Side  │
│ bar    │   Content    │  bar   │
│        │              │        │
├────────┴──────────────┴────────┤
│            Footer              │
└────────────────────────────────┘

Solution with Grid (Recommended)

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "left   main   right"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
 
.header { grid-area: header; }
.left-sidebar { grid-area: left; }
.main { grid-area: main; }
.right-sidebar { grid-area: right; }
.footer { grid-area: footer; }
 
/* Make it responsive */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "left"
      "right"
      "footer";
    grid-template-columns: 1fr;
  }
}

Solution with Flexbox (Possible but More Complex)

.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
 
.middle {
  display: flex;
  flex: 1;
}
 
.main {
  flex: 1;
  order: 2;
}
 
.left-sidebar {
  width: 200px;
  order: 1;
}
 
.right-sidebar {
  width: 200px;
  order: 3;
}

When asked which is better: "Grid is cleaner for this because it's a two-dimensional layout. We need to control both rows and columns. Flexbox can do it, but requires nesting and is harder to make responsive."

The Question That Catches Most Candidates: flex Property

.item {
  flex: 1;
}

"What does flex: 1 mean?"

It's shorthand for three properties:

• flex-grow: 1 - Item can grow
• flex-shrink: 1 - Item can shrink
• flex-basis: 0% - Start from 0 width

Practical Example

.container {
  display: flex;
}
 
.sidebar {
  width: 250px;      /* Fixed width */
  flex-shrink: 0;    /* Don't shrink */
}
 
.main {
  flex: 1;           /* Fill remaining space */
}

Common flex Values

flex: 0 1 auto;  /* Default - don't grow, can shrink, auto basis */
flex: 1;         /* flex: 1 1 0% - grow and shrink equally */
flex: auto;      /* flex: 1 1 auto - grow/shrink based on content */
flex: none;      /* flex: 0 0 auto - don't grow or shrink */

Practical Use Cases

1. Card with Footer at Bottom

.card {
  display: flex;
  flex-direction: column;
  height: 300px;
}
 
.card-content {
  flex: 1;  /* Grow to push footer down */
}
 
.card-footer {
  /* Always at bottom, regardless of content height */
}

2. Equal Height Columns

.row {
  display: flex;
}
 
.column {
  flex: 1;
  /* All columns equal width and equal height */
}

3. Responsive Navigation to Hamburger

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.nav-links {
  display: flex;
  gap: 1rem;
}
 
@media (max-width: 768px) {
  .nav-links {
    display: none;  /* Hide on mobile, show hamburger menu instead */
  }
}

4. Dashboard Layout with Grid

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 1rem;
}
 
.widget-large {
  grid-column: span 2;
  grid-row: span 2;
}
 
.widget-wide {
  grid-column: span 2;
}

Common Follow-Up Questions

"What's the difference between justify-content and align-items?"

"justify-content aligns items along the main axis - horizontal in row direction, vertical in column direction. align-items aligns along the cross axis - perpendicular to the main axis. I remember it as: justify = main, align = cross."

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;  /* Horizontal */
  align-items: center;      /* Vertical */
}
 
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Vertical */
  align-items: center;      /* Horizontal */
}

"What's the difference between auto-fit and auto-fill?"

"Both create responsive grids, but they handle empty space differently. auto-fit collapses empty tracks, so items stretch to fill the container. auto-fill keeps empty tracks, so items maintain their max size with empty space at the end."

/* auto-fit: items stretch to fill container */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 
/* auto-fill: items stay at max size, empty space at end */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

"How do you handle gaps between items?"

"Use the gap property - it works in both Flexbox and Grid. It's cleaner than margins because it only applies between items, not on the edges."

.flex-container {
  display: flex;
  gap: 1rem;  /* Modern, clean solution */
}
 
.grid-container {
  display: grid;
  gap: 1rem;           /* Both row and column gap */
  row-gap: 1rem;       /* Just rows */
  column-gap: 2rem;    /* Just columns */
}

"How do you make a grid item span multiple columns/rows?"

.item {
  grid-column: span 2;     /* Span 2 columns */
  grid-row: span 3;        /* Span 3 rows */
 
  /* Or be explicit */
  grid-column: 1 / 3;      /* From line 1 to line 3 */
  grid-row: 2 / 4;         /* From line 2 to line 4 */
 
  /* Full width */
  grid-column: 1 / -1;     /* From first to last line */
}

What Interviewers Are Really Testing

When I ask about Flexbox vs Grid, I'm checking:

1. Conceptual understanding - Do you know the 1D vs 2D difference?
2. Practical judgment - Can you choose the right tool for a layout?
3. Common patterns - Can you center things, build a navbar, create a responsive grid?
4. Modern CSS - Do you know gap, auto-fit/auto-fill, grid-template-areas?

A candidate who can explain when to use each, demonstrate centering, and build a responsive gallery without media queries will stand out.

Quick Reference Card

Practice Questions

Test yourself before your interview:

1. Center a div both horizontally and vertically without knowing its dimensions.

2. Create a responsive 3-column layout that becomes 1 column on mobile using Grid.

3. What's the output of this Flexbox code?

.parent {
  display: flex;
}
.child1 { flex: 2; }
.child2 { flex: 1; }
.child3 { flex: 1; }

4. Create a navigation bar with logo on left, links in center, and button on right.

Answers:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

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

3. child1 takes 50% of space (2/4), child2 and child3 each take 25% (1/4).

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
/* Or use Grid: */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-links { justify-self: center; }
.nav-button { justify-self: end; }

Related Articles

If you found this helpful, check out these related guides:

• Complete Frontend Developer Interview Guide - comprehensive preparation guide for frontend interviews
• HTML5 Accessibility Interview Guide - Building accessible web applications
• React Hooks Interview Guide - Master useState, useEffect, and custom hooks
• Angular Change Detection Interview Guide - How Angular detects and propagates changes

Ready for More CSS Interview Questions?

This is just one topic from our complete CSS interview prep guide. Get access to 50+ CSS questions covering:

• Specificity and the cascade
• Positioning and z-index
• Responsive design patterns
• CSS animations and transitions
• Modern CSS features (Container Queries, :has(), etc.)

Get Full Access to All CSS Questions →

Or try our free CSS preview to see more questions like this.

Written by the EasyInterview team, based on real interview experience from 12+ years in tech and hundreds of technical interviews conducted at companies like BNY Mellon, UBS, and leading fintech firms.