Day 5: Grid Garden & Week 6 Mini-Project
Daily Objective
Section titled “Daily Objective”Master all Grid rules by completing Grid Garden and understanding when to choose Grid vs Flexbox.
1. Grid vs Flexbox
Section titled “1. Grid vs Flexbox”| Feature | Flexbox | CSS Grid |
|---|---|---|
| Dimensions | 1D (Row OR Column) | 2D (Rows AND Columns) |
| Focus | Content-driven (elements decide size) | Layout-driven (grid decides cell size) |
| Best For | Navbars, buttons, form rows, centering | Overall page structure, photo galleries, dashboard cards |
Week 6 Mini-Project: Blog Layout & Photo Gallery
Section titled “Week 6 Mini-Project: Blog Layout & Photo Gallery”Project Requirements:
- Blog Layout: Header, sidebar with author bio, main content area, and footer structured using
grid-template-areas. - Photo Gallery: A gallery section populated with cards using
repeat(auto-fit, minmax(250px, 1fr)). - Complete all 28 levels of Grid Garden.