CSS Grid versus Flexbox fundamentals

WHAT THIS TESTS The interviewer wants to see that you pick layout tools by their model rather than habit, and that you understand one-dimensional versus two-dimensional layout.

A GOOD ANSWER COVERS The fundamental difference is dimensionality. Flexbox is one-dimensional: it distributes items along a single axis, either a row or a column, and wrapping creates independent lines rather than a true grid. Grid is two-dimensional: it defines rows and columns at once and places items into cells that align across both axes. A related framing: Flexbox is content-out, sizing around the content flowing in one direction, while Grid is layout-in, defining the structure first and slotting content into it. They compose well; a grid cell can contain a flex container.

COMMON WRONG ANSWERS Claiming Grid replaces Flexbox or is just a newer version; they target different problems. Saying Grid is only for tabular data; it is a general layout engine. Forcing a two-dimensional page layout out of nested flex containers, which becomes brittle, or using Grid for a simple inline button row, which is overkill.

LIKELY FOLLOW-UPS Can they be combined? Yes, routinely, Grid for the page skeleton and Flexbox inside components. How does alignment differ? Both share justify and align properties, but Grid adds line-based placement and named template areas. When does Flexbox wrapping fall short? When you need items to line up across rows and columns simultaneously, which only Grid guarantees.

ONE CONCRETE EXAMPLE Grid suits a page layout with a header, sidebar, main content, and footer: grid-template-areas lets you name regions and rearrange them responsively in one place, with everything aligned in both directions. Flexbox suits a navigation bar or toolbar: a single row of links and a button pushed to the end, where display: flex with justify-content: space-between handles spacing along one axis. A photo gallery that must align into even rows and columns is Grid; a tag list that simply wraps as items flow is Flexbox.