20+ CSS Flexbox & Grid Interview Questions 2025: Layouts, Centering & Responsive Design

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. This guide covers the Flexbox and Grid questions you'll face in CSS interviews.

Table of Contents

1. Flexbox vs Grid Fundamentals Questions
2. Flexbox Centering Questions
3. Flexbox Property Questions
4. Grid Layout Questions
5. Responsive Layout Questions
6. Quick Reference

Flexbox vs Grid Fundamentals Questions

These questions test your understanding of when to use Flexbox versus Grid.

What is the difference between CSS Flexbox and Grid?

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. This fundamental difference determines when to use each.

Flexbox is content-driven, meaning the size of items affects the layout. Grid is layout-driven—you define rows and columns upfront, creating a structure that items are placed into. Use Flexbox for components like navbars, button groups, and centering. Use Grid for page layouts and anything that needs alignment in both directions, like dashboards or galleries.

When should you use Flexbox vs Grid?

The choice depends on your layout needs. Use Flexbox for navigation menus, centering content, card layouts (the content inside), and spacing items in a single row or column. Use Grid for page-level layouts, image galleries, dashboards, and any design with clear rows and columns.

They're not mutually exclusive—you often use Grid for the page layout and Flexbox for components within it. For example, a Grid-based page layout might contain a Flexbox-based navigation bar and Flexbox-aligned card content.

How would you build the Holy Grail layout?

The Holy Grail layout is a classic interview question: header spanning full width, three columns in the middle (sidebar, main, sidebar), and a footer spanning full width. Grid is the recommended solution because it's a two-dimensional layout.

.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;
  }
}

You can build this with Flexbox, but it requires nesting and is harder to make responsive. Grid is cleaner because you control both rows and columns directly.

Flexbox Centering Questions

Centering is the most common Flexbox interview question. These questions test the technique that ends "how do I center a div" jokes.

How do you center an element with Flexbox?

To center an element both horizontally and vertically, apply three properties to the parent container:

.container {
  display: flex;
  justify-content: center;  /* Main axis (horizontal) */
  align-items: center;      /* Cross axis (vertical) */
  height: 100vh;
}

justify-content: center centers along the main axis (horizontal by default), and align-items: center centers along the cross axis (vertical by default). The container needs a height for vertical centering to work.

How do you center only horizontally or only vertically?

For horizontal centering only, use justify-content:

.container {
  display: flex;
  justify-content: center;
}

For vertical centering only, use align-items and ensure the container has height:

.container {
  display: flex;
  align-items: center;
  height: 300px;
}

What is the difference between justify-content and align-items?

justify-content aligns items along the main axis—horizontal in flex-direction: row, vertical in flex-direction: column. align-items aligns along the cross axis—perpendicular to the main axis.

The key insight is that the axis changes when you change flex-direction:

.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 */
}

Remember: justify = main axis, align = cross axis.

Flexbox Property Questions

These questions test your understanding of the flex shorthand and related properties.

What does flex: 1 mean?

flex: 1 is shorthand for three properties: flex-grow: 1 (item can grow), flex-shrink: 1 (item can shrink), and flex-basis: 0% (start from 0 width). This means the element will grow to fill available space, shrink if needed, and starts with no initial size.

When multiple items have flex: 1, they share available space equally. This is commonly used to make a main content area expand while a sidebar stays fixed:

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

What are the common flex shorthand values?

The flex property has several common patterns:

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 */

flex: 1 is by far the most common, used whenever you want an item to fill available space.

How do you create a card with the footer always at the bottom?

Use flex-direction: column with flex: 1 on the content area to push the footer down:

.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 */
}

This pattern ensures the footer stays at the bottom even when the content is short.

How do you create equal height columns?

Flexbox makes equal height columns automatic:

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

All flex items in a row automatically stretch to match the height of the tallest item by default (because align-items: stretch is the default).

Grid Layout Questions

These questions test your understanding of CSS Grid for complex layouts.

How do you create a basic page layout with Grid?

Grid excels at page-level layouts with defined areas:

.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; }

The 1 / -1 syntax means "from first line to last line," spanning the full width regardless of how many columns exist.

What does grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) do?

This is one of the most powerful CSS patterns—it creates a responsive grid without media queries:

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

repeat(auto-fit, ...) creates as many columns as will fit. minmax(250px, 1fr) makes each column minimum 250px and maximum equal share of remaining space. Columns automatically wrap to new rows as the viewport shrinks.

What is 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));

Use auto-fit in most cases—it's what you typically want for galleries and card layouts.

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

Use grid-column: span or explicit line numbers:

.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 */
}

This is useful for dashboard layouts where widgets have different sizes:

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

Responsive Layout Questions

These questions test your ability to create layouts that work across screen sizes.

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 build a responsive navigation bar?

Flexbox is ideal for navigation bars:

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

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

How do you create a navigation with logo left, links center, and button right?

This is a common interview challenge. There are two clean solutions:

Grid solution (recommended):

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-links { justify-self: center; }
.nav-button { justify-self: end; }

Flexbox solution:

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

The Grid solution is cleaner because it doesn't require absolute positioning.

Quick Reference

Related Articles

• 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