CSS Grid and Flexbox Quiz
Four drills on the differences between flexbox and grid, plus the gap, auto-fit, and minmax patterns that show up in real responsive layouts.
Question Bank
Medium
CSS
4 questions
quiz
css-grid
css-flexbox
css-responsive-design
953 views
8
Build a horizontal navigation bar with flexbox: logo on the left, a flexible spacer, and a group of three links on the right. The links should stay together.
Build a responsive 3-column grid that gracefully collapses to 1 column on narrow screens, without writing any media queries. Use repeat, auto-fit, and minmax.
Build a magazine-style 4-column grid where the hero article spans 2 columns and 2 rows. Show the grid-area style of placement.
Why is the gap property a better choice than margins between flex or grid items? Mention one bug gap avoids.