CSS Flexbox & Grid Challenge
Sharpen your frontend layout instincts. Write real CSS Flexbox and Grid properties to match target coordinate boxes across 10 progressive tiers.
Level 1: Perfect Flex Center
Center the card both horizontally (main axis) and vertically (cross axis) inside the container.
.container { ... }Flexbox vs. Grid: Mental Model & When to Use Which
Modern CSS provides two complementary layout engines: CSS Flexible Box (Flexbox) and CSS Grid. Choosing the right tool depends on whether you are designing along one dimension or two dimensions:
- Flexbox (1D - Linear Flows): Best for distributing items along a single axis (either a horizontal row or vertical column) where child content dimensions dictate item spacing (e.g. Navbars, pill tags, button groups, card headers).
- CSS Grid (2D - Structural Matrices): Best for aligning items across rows and columns simultaneously where the container layout structure dictates element placement (e.g. Bento dashboards, page layouts, photo galleries, equal-height card grids).
Main Axis (justify-content): Controls alignment along the flow direction (flex-start, center, space-between, space-around).
Cross Axis (align-items): Controls alignment perpendicular to flow (flex-start, center, flex-end, stretch).
Item Override (align-self): Overrides cross-axis positioning for a single child.
Explicit Tracks: grid-template-columns: repeat(3, 1fr) creates 3 equal flexible tracks.
Fluid Auto-Fit: repeat(auto-fit, minmax(120px, 1fr)) creates responsive columns without media queries.
One-Line Center: place-items: center combines justify and align into a single rule.
Frequently Asked Questions
How does the live layout diffing engine work?
The engine computes the exact pixel coordinates, widths, and heights of all child elements rendered in your live preview sandbox and compares them directly against the target coordinate box. When all elements align within subpixel tolerance, the level clears automatically.
Why is modern CSS `gap` preferred over margins?
The modern gap property applies spacing strictly between adjacent child items without adding unwanted outer margins to edge elements, eliminating legacy :last-child margin resets.