Topic
Definition
Flexbox is a one-dimensional layout model for aligning items along a main axis and cross axis; CSS Grid is a two-dimensional layout model that places items into rows and columns with explicit tracks and alignment controls.
In simpler words
Flex is for a row or a column of items (nav, toolbars, card rows). Grid is for full page or card grids with rows and columns together. Use justify-* and align-* to distribute and center; prefer gap over margin hacks.
Flex direction, wrapping, justify-content, align-items, gap; Grid tracks and simple alignment; choosing flex vs grid.
Flex direction, wrapping, justify-content, align-items, gap; Grid tracks and simple alignment; choosing flex vs grid.
Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.dashboard {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
align-items: start;
}Read the example from data and control flow to the resulting UI. Keep the component boundary small.
Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.
Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.
Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?
Definition
High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.
In simpler words
Each mistake below shows Wrong vs Right code — compare them side by side.
When something misbehaves, match the symptom to a pattern below before rewriting the feature.
Prefer fixing the ownership or update path over adding another Effect or sync step.
// Wrong
.row > * { margin-right: 12px; }
.row > *:last-child { margin-right: 0; }
// Right
.row {
display: flex;
gap: 12px;
}gap spaces flex/grid items without last-child margin tricks.
// Wrong
.page {
display: flex;
flex-wrap: wrap;
}
.page > * { width: 33%; }
// Right
.page {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}Wrapping flex with percentage widths is fragile. Grid owns two-dimensional track sizing.
// Wrong
.center {
display: flex;
/* main axis is row by default */
align-items: center; /* cross axis only */
}
// Right
.center {
display: flex;
justify-content: center; /* main axis */
align-items: center; /* cross axis */
}justify-content distributes along the main axis; align-items aligns on the cross axis.
Live playground
Change one input at a time and predict the next render.
No interactive demo for course-css-flexbox-grid yet — use the code samples and Wrong vs Right examples above.
Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 3 · practical 2 · logic 2