Lesson 04 · HTML & CSS
HTML & CSS Fundamentals: Layout with Flexbox & Grid
Flexbox for one-dimensional rows, grid for two-dimensional pages, a responsive card row with auto-fit and minmax, and a first honest media query.
Prerequisites: HTML & CSS Fundamentals: Selectors, Cascade & the Box Model
Learning objectives
By the end of this lesson, you will be able to:
- Lay out a row with display: flex and its axis vocabulary
- Space and align flex items with gap, justify-content and align-items
- Define two-dimensional layouts with grid-template-columns and fr units
- Build a responsive card row with auto-fit and minmax
- Adapt layouts to wide screens with a min-width media query
- Choose flexbox or grid by the shape of the layout