BitWithBite
HTML & CSS Worksheet
🎨 CSS Grid
SCORE___ / 20
NameClassDate
After this worksheet you can
display:grid + template columnsfr units and repeat()Spanning tracksGrid vs flex📚 Quick Recap
CSS Grid is the most powerful layout system in CSS. Unlike Flexbox (one-dimensional — a row or a column), Grid is two-dimensional — it controls both rows and columns at the same time. It's perfect for full-page layouts, dashboard grids, photo galleries, and any design with an explicit two-axis structure. Flexbox and Grid work beautifully together — use Grid for the big picture, Flexbox for the details inside.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Enable grid with:
2Three equal columns:
3fr means a fraction of:
4Grid is strongest for:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5grid-template- defines column tracks.
6gap: 16px spaces both rows and .
7Photo gallery: responsive auto-fitting cards.
8Layout: sidebar 250px + fluid main.
9Grid vs flex - when which?
🚀 Section C · Challenge ● CHALLENGE 5
10Make a header span all 3 columns.
💭 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-A 3-A 4-A | 5 columns 6 columns 7 = display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; 8 = grid-template-columns: 250px 1fr; 9 = Grid for page-level 2D layouts; flex for 1D rows/toolbars | 10 = grid-column: 1 / -1 (or span 3)