Over the past two weeks, I’ve been diving deep into modern CSS layout techniques, switching from Flexbox challenges to exploring the power of CSS Grid!
Read more: Week 5-6In the recent modules, we mastered key modern layout tools: CSS Flexbox, CSS Grid, and CSS Positioning. Through practical Flexbox examples, we learned to align elements along the main and cross axes using justify-content and align-items, dynamically distribute space via flex-grow, and manage automatic spacing. Moving on to CSS Grid, we learned to build two-dimensional layouts using grid-template-columns, grid-template-rows, flexible fr units, and gap spacing. We also practiced creating complex grids using grid-area and grid lines, enabling us to completely alter the visual order of elements independently of the source HTML. Finally, we combined Grid for the page’s macro-structure and Flexbox for smaller components to create the first draft of our course project.