Master CSS Grid Vs Flexbox When To Use Which with 202 free flashcards. Study using spaced repetition and focus mode for effective learning in Frontend.
Sample card
One-line summary: when Grid vs Flexbox?
Grid: 2D layout (rows AND columns), known structure.
Flexbox: 1D layout (row OR column), content-driven.
Q · 1 of 202
One-line summary: when Grid vs Flexbox?
Q · 2 of 202
Center a single element on the page — Grid or Flex?
Q · 3 of 202
Make a sidebar + main layout with Grid?
Grid: 2D layout (rows AND columns), known structure.
Flexbox: 1D layout (row OR column), content-driven.
Either works. display: grid; place-items: center; or display: flex; align-items: center; justify-content: center;
grid-template-columns: 250px 1fr;
display:flex; with sidebar flex: 0 0 250px and main flex: 1.
Grid: rows stretch by default.
Flex: items stretch on the cross axis (align-items: stretch is default).
Grid: grid-template: 'header header header' auto 'nav main aside' 1fr 'footer footer footer' auto / 200px 1fr 200px;
Both support gap: 1rem; — replaces margin hacks.
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
auto-fill: keeps empty tracks even if not used (collapses to min).
auto-fit: collapses empty tracks (items stretch).
grid-column: span 2 or grid-column: 1 / 3.
grid-column: 1 / -1 — line names go to last.
order: -1 (flex/grid) — but it harms accessibility/tab order. Reserve for visual reorder where the source order is intentional.
Flashcards
Flip to reveal
Focus Mode
Spaced repetition
Multiple Choice
Test your knowledge
Type Answer
Active recall
Learn Mode
Multi-round mastery
Match Game
Memory challenge