Week 4 — Layouts & Responsive Design

Flexbox + Grid + media queries (with planning in Figma)

✅ Grid + Flexbox + Responsive

What I built (this page)

This page is my Week 4 evidence. The overall layout uses CSS Grid (two columns on desktop) and the small content blocks below use Flexbox. A media query switches the layout to one column on smaller screens.

Grid Used for the main two-column structure.
Flexbox Used for these mini blocks and spacing.
Media Query Collapses to a single column on mobile.

Reflection

This week focused on structuring layouts using Grid for page-level design and Flexbox for component alignment. I learned how small changes to grid-template-columns, gap, and Flex properties can dramatically improve clarity and spacing.

I also started planning with a column system in Figma, which helped me think about responsive behaviour before coding. Next, I want to refine spacing and test on multiple screen sizes to make sure the layout stays consistent.