Unit 3 Overview

With a solid foundation in CSS fundamentals, organization, and layout basics (Unit 2 Part 2), this unit focuses on advanced layout systems. You will master CSS Grid techniques including grid areas and subgrid, learn Container Queries for component-based responsive design, and combine layout systems in real projects. These skills enable you to build complex, responsive layouts for any project.

Part 1: Grid Naming, Areas & Responsive Grids

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• Grid Naming and Areas
  Learn grid-area syntax, how to name areas and lines, and how to use grid-template-areas for clear, maintainable layouts.
• Auto-Fit vs Auto-Fill
  Understand the difference between auto-fit and auto-fill and apply each to build responsive, flexible card grids.
• Flexbox and Grid Practice
  Combine Flexbox and Grid in a page layout and explain when each layout system is the better choice.
• Subgrid
  Explore subgrid support and use cases, and learn when subgrid solves layout problems that regular Grid cannot.
• Complex Grid Layouts Using Grid-Area
  Build multiple complex layouts (such as magazine, dashboard, and card grid pages) using grid-area to control structure.

Part 2: Container Queries & Combining Layouts

Complete the following in the specified order by the due dates listed in Canvas or before the end of the unit if no date is listed:

• Container Queries
  Learn how Container Queries shift thinking away from global media queries, study @container syntax, and see when container-based layouts are more robust.
• Container Query Patterns
  Apply real-world patterns for cards, sidebars, and fluid components using container queries with Grid and Flexbox; container units and fallbacks.
• Container Queries Practice
  Build components that use container queries for component-level responsiveness and document when container queries are the better choice than media queries.
• Team Project: Responsive Multi-Page Layout
  Collaboratively build several different page types (for example, homepage, product listing, product detail, about, contact, navigation) and apply Grid, Flexbox, and Container Queries appropriately throughout. Builds on the Unit 2 Multi-File CSS Architecture team repo.