Quiz: Flexbox vs Grid
Choose the Right Layout Tool
"Should I use flexbox or grid?" You'll ask yourself this question a hundred times. Let's build the intuition to answer it instantly.
Each question presents a layout scenario. Your job: decide which tool is the better choice and why.
The one-sentence framework: Flexbox is for layout in one dimension (row OR column). Grid is for layout in two dimensions (rows AND columns simultaneously). When items need to align across both axes, grid wins. When items just need to flow in a line, flexbox wins.
Scenario 1: Navigation Bar
A horizontal navigation bar with a logo on the left, nav links in the center, and a user avatar on the right. The links should be evenly spaced. On mobile, it becomes a hamburger menu.
Scenario 2: Card Grid with Consistent Columns
A grid of product cards — 3 columns on desktop, 2 on tablet, 1 on mobile. All cards in the same row must have the same height. Card titles, descriptions, and action buttons must align across cards.
Scenario 3: Centered Login Form
A login form that needs to be horizontally and vertically centered on the page. The form itself is a simple stack of label/input pairs with a submit button.
Scenario 4: Dashboard Layout
Now we're getting into real-world territory. A full-page dashboard with a fixed sidebar, a top header spanning the content area, a main content area, and a widgets panel. The sidebar and header should have fixed sizes, the content area should be flexible.
Scenario 5: Tag/Chip List
A list of tags that wrap to multiple lines when the container is narrow. Each tag is a different width based on its text. Tags should flow left-to-right and wrap naturally.
Scenario 6: Image Gallery with Featured Image
An image gallery where the first image is 2x2 (spans two rows and two columns) and the remaining images are 1x1. The grid should be responsive.
Scenario 7: Sidebar with Vertically Spaced Groups
A sidebar with three groups of navigation links: primary links at top, secondary links in the middle, and settings at the bottom. The groups should be pushed apart vertically.
Scenario 8: Responsive Holy Grail with Reordering
A layout with header, footer, left sidebar, right sidebar, and main content. On mobile, the order should be: header, content, left sidebar, right sidebar, footer. On desktop, it's the traditional holy grail layout.
Decision Framework Summary
When in doubt, refer back to this table.
| Layout Need | Use |
|---|---|
| Single row or column of items | Flexbox |
| Items need to align across rows AND columns | Grid |
| Unknown number of items that wrap | Flexbox (different widths) or Grid (uniform widths) |
| Named layout regions | Grid with template-areas |
| Items spanning multiple rows and columns | Grid |
| Centering a single element | Either (grid is more concise) |
| Page-level layout + component internals | Grid for page, flexbox for components |