Back to the catalog

Guess the CSS: flexbox and grid edition

20 questions

Each Question shows a rendered layout. Can you tell which CSS produced it? Every picture is drawn from box sizes measured in a real browser. You'll work through the main axis versus the cross axis, flex: 1 versus flex: auto, fr versus %, grid-auto-flow: dense, and why margin: auto centers in some layouts but not others.

Questions

Not answered. Which declaration on .row produced this layout?
Not answered. Which declaration on .stack produced this layout?
Not answered. Which declaration on .row distributed the space like this?
Not answered. Which declaration on .tags packed both rows at the top?
Not answered. Which declaration produced these gutters?
Not answered. Which declaration, applied to every item, made the three items equal?
Not answered. Which declarations, applied to every item, render exactly these widths?
Not answered. How wide does .b render, in px?
Not answered. Why won't .main shrink to the 400px that's left?
Not answered. Which grid-template-columns value made the grid overflow by 20px?
Not answered. Which grid-template-columns values render exactly these column widths?
Not answered. The author wanted two equal columns. Which grid-template-columns value gave this 400 / 200 split instead?
Not answered. Which grid-template-columns value stretched two items across the whole row?
Not answered. Which declaration on .board moved the whole grid to the center?
Not answered. Which declaration produced this placement?
Not answered. Add grid-auto-flow: dense. Which item moves into the empty cell?
Not answered. margin: auto centered the box horizontally but left it at the top. Why?
Not answered. Which single declaration on .box centers it in both directions?
Not answered. Which declaration pushed item 4 to the far right while items 1 to 3 stayed on the left?
Not answered. Which parent setups make margin: auto center this box in both directions?