BitWithBite
Full-Stack Worksheet
📊 CSS Grid
SCORE___ / 20
NameClassDate
After this worksheet you can
Set up a grid containerUse grid-template-columnsUse the fr unitBuild a responsive grid without media queries📚 Quick Recap
🎯 What you'll practice: 2D layout with Grid, and the auto-fill/minmax responsive trick.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Grid is activated with:
21fr means:
3Grid differs from Flexbox mainly because Grid is:
4auto-fill with minmax() is used for:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The property that creates equal spacing between grid cells is .
6grid-template-columns: 1fr 1fr 1fr creates equal columns.
7Write grid CSS for 4 equal-width columns with a 2rem gap.
8What does minmax(220px, 1fr) mean inside auto-fill?
9When would you choose Grid over Flexbox for a layout?
🚀 Section C · Challenge ● CHALLENGE 5
10Build a photo gallery grid that automatically shows more/fewer columns based on screen width, minimum 150px per item, with no media queries. Write the CSS.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-B 3-B 4-B | 5 = gap 6 = three 7 = .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;} 8 = Each column is at least 220px wide but grows to fill remaining space (1fr) equally with siblings, up to available width 9 = When you need alignment along two axes at once (rows AND columns), like a page layout or photo gallery, rather than a single row/column of items | 10 = .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;}