17 CSS Flexbox & Grid Interview Questions and Answers

Flexbox and Grid are complementary CSS layout systems. Interviewers usually care less about memorized declarations than about whether you can explain axes, tracks, intrinsic sizing, overflow, source order, and responsive behavior. These 17 questions cover the decisions and edge cases behind common layout tasks.

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
7. Frequently Asked Questions

Flexbox vs Grid Fundamentals Questions

What is the difference between CSS Flexbox and Grid?

Flexbox lays items out primarily along a main axis. A flex container can wrap onto multiple lines, and alignment also operates on the cross axis, so calling it “one-dimensional” is a useful starting point rather than a complete description.

Grid defines rows and columns and places items against their shared grid lines and tracks. That makes it especially useful when horizontal and vertical relationships must be coordinated. Neither system is limited to a particular physical size: a component can use Grid, and a whole page can use nested Flexbox.

When should you use Flexbox vs Grid?

Choose from the relationships in the design:

• Use Flexbox when items should flow, grow, shrink, wrap, or align along a main axis—for example, a toolbar or button group.
• Use Grid when items must align to shared rows and columns—for example, a dashboard, comparison table, or gallery.
• Combine them when different parts of the interface have different layout rules.

Do not use visual reordering as a substitute for logical HTML. order, reversed flex directions, and Grid placement can change visual order without changing the DOM, reading, or focus order.

How would you build the Holy Grail layout?

Grid expresses the header, content columns, and footer directly. Keep the DOM in a sensible reading order because named areas do not reorder it for assistive technology.

<div class="layout">
  <header class="header">Header</header>
  <aside class="left-sidebar">Primary sidebar</aside>
  <main class="main">Main content</main>
  <aside class="right-sidebar">Secondary sidebar</aside>
  <footer class="footer">Footer</footer>
</div>

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "left   main   right"
    "footer footer footer";
  grid-template-columns:
    minmax(10rem, 16rem)
    minmax(0, 1fr)
    minmax(10rem, 16rem);
  grid-template-rows: auto 1fr auto;
  min-block-size: 100dvh;
}
 
.header { grid-area: header; }
.left-sidebar { grid-area: left; }
.main { grid-area: main; min-inline-size: 0; }
.right-sidebar { grid-area: right; }
.footer { grid-area: footer; }
 
@media (width < 48rem) {
  .layout {
    grid-template-areas:
      "header"
      "left"
      "main"
      "right"
      "footer";
    grid-template-columns: minmax(0, 1fr);
  }
}

The breakpoint is a design decision, not a universal 768px rule. If this layout is a reusable component, a size container and @container query may respond more accurately than the viewport.

Flexbox Centering Questions

How do you center an element with Flexbox?

Center on both Flexbox axes from the parent:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-block-size: 100dvh;
}

justify-content operates on the main axis; align-items operates on the cross axis. With the default horizontal writing mode and flex-direction: row, those appear horizontal and vertical respectively. The alignment is visible only when the container has free space on the relevant axis.

How do you center only horizontally or only vertically?

Map the requirement to the current axes instead of memorizing a physical direction. In the common row case, main-axis centering appears horizontal and cross-axis centering appears vertical:

.row-centered-on-main-axis {
  display: flex;
  justify-content: center;
}
 
.row-centered-on-cross-axis {
  display: flex;
  align-items: center;
  min-block-size: 18rem;
}

For flex-direction: column, the mapping changes. Writing mode can change the physical mapping too. Also check whether you mean centering the group (justify-content), each item in its available area (align-items/align-self), or one item with auto margins.

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

In Flexbox, justify-content distributes leftover space on the main axis after flex sizing. align-items supplies the default cross-axis alignment for each item; an item can override it with align-self.

.flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
}
 
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
}

In Grid, distinguish item alignment (justify-items, align-items) from distributing the grid tracks inside the container (justify-content, align-content). Logical axes are safer terminology than assuming every document is left-to-right and horizontal.

Flexbox Property Questions

What does flex: 1 mean?

In current browsers, flex: 1 normally computes to flex: 1 1 0%: grow factor 1, shrink factor 1, and a zero-percent flex basis. It is useful when an item should participate fully in distributing available main-axis space.

.container {
  display: flex;
}
 
.sidebar {
  flex: 0 0 15rem;
}
 
.main {
  flex: 1;
  min-inline-size: 0;
}

The automatic minimum size of a flex item can prevent it from shrinking below long unbreakable content. min-inline-size: 0 is a common deliberate fix, but first confirm that wrapping, truncation, or overflow is the intended product behavior. Equal flex factors do not guarantee equal outer widths when padding, borders, min/max sizes, or other constraints differ.

What are the common flex shorthand values?

The shorthand sets grow, shrink, and basis together:

flex: initial;   /* 0 1 auto: initial value */
flex: 1;         /* normally computes to 1 1 0% */
flex: auto;      /* 1 1 auto: start from the auto main size */
flex: none;      /* 0 0 auto: inflexible */
flex: 2 1 12rem; /* explicit grow, shrink, basis */

Prefer a named keyword or the full three-value form when it communicates the sizing intent more clearly. flex-basis: auto consults the main-size property and content; a zero basis changes how free space is calculated.

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

A column flex container plus an auto margin expresses the intent without making the middle section absorb sizing responsibilities:

.card {
  display: flex;
  flex-direction: column;
  min-block-size: 18rem;
}
 
.card-footer {
  margin-block-start: auto;
}

The card needs extra block-axis space for the margin to consume. Avoid a fixed height if content may grow; otherwise text zoom, translations, or dynamic content can overflow.

How do you create equal height columns?

Flex items default to align-self: auto, which takes the container's default align-items: stretch. In a row flex container, items with an auto cross size therefore stretch to the flex line's cross size.

.row {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}
 
.column {
  flex: 1 1 0;
  min-inline-size: 0;
}

This does not override definite heights or every min/max constraint, and wrapped flex lines size independently. If rows across multiple lines must align, Grid usually models that relationship more directly.

Grid Layout Questions

How do you create a basic page layout with Grid?

Define the tracks, allow the content track to shrink below its min-content size when appropriate, and span shared regions by grid lines:

.page {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-block-size: 100dvh;
}
 
.header,
.footer {
  grid-column: 1 / -1;
}

1 / -1 spans from the first to the last explicit grid line. For a nested component that must inherit its parent's column tracks, consider subgrid rather than duplicating track definitions.

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

The pattern creates as many repeated tracks as fit. Each track has a 200px minimum and can take an equal fraction of leftover space; auto-fit then collapses empty repeated tracks.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

The commonly shown minmax(200px, 1fr) can overflow a container narrower than 200px. The nested min() pattern caps the minimum at the available inline size. In production, derive the minimum from real content and design constraints rather than copying a magic number.

What is the difference between auto-fit and auto-fill?

Both keywords calculate how many repeated tracks fit. When there are fewer items than possible tracks, auto-fill keeps the empty tracks, while auto-fit collapses them; flexible occupied tracks can then expand into the released space.

/* Empty repeated tracks remain. */
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 
/* Empty repeated tracks collapse. */
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));

Neither is universally better. Choose auto-fill when preserved tracks or placement behavior is useful, and auto-fit when occupied tracks should commonly stretch into empty track space.

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

Address grid lines explicitly or span a number of tracks:

.item {
  grid-column: span 2;
  grid-row: span 3;
}
 
.item-at-known-lines {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}
 
.full-width {
  grid-column: 1 / -1;
}

Confirm how implicit tracks should be sized when placement extends beyond the explicit grid. Preserve logical DOM order even if dense packing or explicit placement changes the visual arrangement.

Responsive Layout Questions

How do you handle gaps between items?

gap creates gutters between Grid tracks and between flex items or lines. It does not add outer spacing around the container, so margins and padding still have separate jobs.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
 
.grid-container {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

Prefer logical spacing and test overflow with long content, text zoom, and narrow containers. A gap still consumes space, so percentage-sized items may need a different sizing formula.

How do you build a responsive navigation bar?

Flexbox handles the row, but responsive navigation also needs semantic HTML, a real button, keyboard behavior, focus management, and synchronized accessible state. CSS alone cannot update aria-expanded or implement Escape-key behavior.

<nav class="navbar" aria-label="Primary">
  <a class="logo" href="/">Logo</a>
  <button
    class="nav-toggle"
    type="button"
    aria-expanded="true"
    aria-controls="primary-links"
  >
    <span class="visually-hidden">Close navigation</span>
    <span aria-hidden="true">☰</span>
  </button>
  <ul class="nav-links" id="primary-links">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

.navbar,
.nav-links {
  display: flex;
  align-items: center;
}
 
.navbar {
  justify-content: space-between;
  gap: 1rem;
}
 
.nav-links {
  gap: 1rem;
}
 
.nav-toggle {
  display: none;
}
 
@media (width < 48rem) {
  .nav-toggle {
    display: inline-flex;
  }
 
  .nav-toggle[aria-expanded="false"] + .nav-links {
    display: none;
  }
}

The initial expanded state keeps the links usable if JavaScript fails. JavaScript should toggle aria-expanded, update the accessible label, support Escape, and put focus somewhere predictable when the menu closes. Test the actual breakpoint with zoom and translations.

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

Three Grid tracks can center the middle group relative to the whole container while the outer groups occupy matching flexible tracks:

.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}
 
.nav-links { justify-self: center; }
.nav-action { justify-self: end; }

This can still overflow when labels, translations, or zoom make the three groups wider than the container. Define a collapse/wrap strategy at the component's real constraint. Absolute positioning can produce mathematical centering, but removing the middle group from flow makes overlap easier, so it is not a default fix.

Quick Reference

Frequently Asked Questions

What is the difference between CSS Flexbox and Grid?

Flexbox distributes and aligns items primarily along one main axis, although wrapping can create multiple flex lines. Grid defines rows and columns together and lets items align to shared tracks. Choose according to the relationships the design needs, not a universal component-versus-page rule.

When should you use Flexbox vs Grid?

Use Flexbox when items should flow and share space along a main axis, such as a toolbar or button group. Use Grid when rows and columns must share tracks, such as a dashboard or gallery. Either can build large or small layouts, and combining them is normal.

How do you center an element with Flexbox?

Set display: flex on the parent, then use justify-content: center for the main axis and align-items: center for the cross axis. Which physical direction those axes represent depends on flex-direction and writing mode. The container also needs usable free space on each axis.

What does flex: 1 mean?

In browsers, flex: 1 normally computes to flex: 1 1 0%, so the item can grow and shrink from a zero-percent flex basis. Equal flex factors divide flex space, but they do not guarantee equal outer sizes when items have different padding, borders, minimum sizes, or other constraints.

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

It creates as many 200px-to-1fr columns as fit, then collapses empty repeated tracks so occupied tracks can expand. Items wrap onto new rows as space decreases. A hard 200px minimum can overflow a narrower container, so choose the minimum from real content and container constraints.

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

In Flexbox, justify-content distributes free space between or around items on the main axis, while align-items sets the default alignment of items on the cross axis. The physical directions depend on flex-direction and writing mode. In Grid, alignment also depends on whether you align items inside grid areas or distribute tracks in the container.

Official Sources

• CSS Flexible Box Layout Module Level 1
• CSS Grid Layout Module Level 2
• CSS Box Alignment Module Level 3
• CSS Containment Module Level 3
• WCAG 2.2: Understanding Focus Order

Related Articles

• Complete Frontend Developer Interview Guide - comprehensive preparation guide for frontend interviews
• CSS Grid Interview Questions - deeper practice with tracks, placement, and responsive grids
• Flexbox Interview Questions - deeper practice with flex sizing and alignment
• HTML5 Accessibility Interview Guide - building accessible web applications