Practice & Assessment
Test your understanding of Layout with Flexbox and Grid
Multiple Choice Questions
5Which class makes a flex child fill the remaining available width?
What does grid place-items-center do?
What does inset-0 expand to in CSS?
Which combination centers an element on both axes in a full-height flex container?
What does sticky top-4 do to an element?
Coding Challenges
1Build a 3-column pricing grid with a featured center card
Create a pricing section with 3 plan cards in a row (grid-cols-3). The center Pro card should be elevated: dark background (bg-gray-900 text-white), slightly taller, and a Most Popular badge using absolute positioning. Left and right cards use light background. Each card: plan name, price, 4 feature items, CTA button. Add gap between cards. Expected: polished 3-column pricing layout at desktop width. Time estimate: 20-25 minutes.
Mini Project
Dashboard Layout Skeleton
Build a full dashboard layout shell with Tailwind Flexbox and Grid. Requirements: fixed top navbar (flex, justify-between, items-center, logo and avatar); two-column body with fixed-width sidebar (w-64, flex-shrink-0) and fluid main area (flex-1); inside main, a stats row with 4 equal cards (grid grid-cols-4 gap-4); below that, a 2-column grid with a chart placeholder and activity list. Use position utilities for the fixed navbar and sticky sidebar. Apply consistent spacing and borders throughout. No JavaScript — purely structural HTML with Tailwind.