Skip to content
RED SAGSkills
easyFrontend Developer interview question

What is the difference between Flexbox and CSS Grid, and when would you use each?

What the interviewer wants to hear

  • Flexbox is one-dimensional: it lays items out in a row or a column
  • Grid is two-dimensional: it controls rows and columns together
  • Flexbox suits components like nav bars, toolbars and centring content
  • Grid suits page layouts and card galleries with aligned rows and columns
  • They are often combined: Grid for the page, Flexbox inside components

Model answer

Flexbox is a one-dimensional layout system. It places items along one axis, a row or a column, and is great at distributing space and aligning items, for example a navigation bar, a toolbar of buttons, or centring something inside a box. Content size drives the layout, and items can wrap onto new lines. CSS Grid is two-dimensional. You define rows and columns together and place items into that structure, so things line up both across and down. I use it for page layouts with a header, sidebar and main area, and for card galleries, often with repeat(auto-fit, minmax(200px, 1fr)) so it responds without media queries. In practice I combine them: Grid for the overall page or a section, and Flexbox inside individual components. The rule of thumb is that if I care about alignment in both directions, Grid is easier; if I just need a line of items, Flexbox is simpler.

Can you answer it under time pressure?

Take a timed easy round and get scored on every answer.

Start mock interview

More easy Frontend Developer questions