CSS Layout: Flexbox, Grid & Responsive Design
Play the browser's layout engine: calculate flex-grow and flex-shrink, grid tracks with fr, minmax and auto-fill, positioning, media queries, clamp() and custom properties for a fictional plant shop, with every answer checked as you go.
- One-time payment
- Instant access right after payment
- Secure checkout with Stripe
About this course
In this intermediate course you play the browser's layout engine. For a fictional plant shop you calculate what real CSS produces: how flex-grow and flex-shrink share space, how justify-content and auto margins place items, how grid tracks with px, %, fr, minmax() and repeat(auto-fill) resolve, where line numbers, span and named areas put items, and how absolute, sticky and z-index behave. Then you make it responsive with mobile-first media queries, fluid containers, aspect-ratio, rem, em, vw, clamp() and custom properties. Twenty-two hands-on labs check every answer, and a final exam leads to your certificate.
Lessons
- Box Sizing Refresher: How Wide Is a Card Really?Free
- Normal Flow & Collapsing Margins Locked
- Flex Containers, Axes & justify-content Locked
- flex-grow: Sharing the Free Space Locked
- flex-shrink: When the Items Do Not Fit Locked
- The flex Shorthand: flex: 1, auto and none Locked
- flex-wrap & gap: Rows of Cards Locked
- Cross-Axis Alignment & Auto Margins Locked
- Grid Tracks: px, % and fr Locked
- minmax(): Flexible but Bounded Tracks Locked
- repeat(auto-fill) vs repeat(auto-fit) Locked
- Placing Items: Lines, span & Negative Numbers Locked
- Named Areas with grid-template-areas Locked
- The Implicit Grid: grid-auto-rows & Auto-Placement Locked
- position: relative, absolute & sticky Locked
- z-index & Stacking Contexts Locked
- Units That Scale: rem, em, vw & clamp() Locked
- Media Queries & Mobile-First Breakpoints Locked
- Fluid Containers & aspect-ratio Locked
- Custom Properties: var(), Inheritance & calc() Locked
- Transitions: Duration, Delay & Staggering Locked
- Capstone: The Responsive Storefront Locked