Responsive Layout with Flexbox and CSS Grid
Responsive Layout (Flexbox, Grid) is an intermediate-level course of 6 lessons (about 3 h 45 min), with 18 exercises and 18 quiz questions. Prerequisites: CSS Fundamentals. Exercises run in the browser, with nothing to install.
- Front-end
- Intermediate
- 6 lessons
- 3 h 45 min
- 18 exercises
- Exercises run in the browser
The course in brief
This course teaches you how to build robust, adaptive layouts with modern CSS tools. You will align elements with Flexbox, structure pages and catalogs with Grid, then make your sites responsive with a mobile-first approach, before moving on to recent techniques: fluid values, container queries, and responsive images. The final project is the complete responsive home page of an online store.
What you will be able to do
- Align and distribute elements along an axis with Flexbox
- Build grids and page templates with CSS Grid and named areas
- Create adaptive grids without media queries (flex-wrap, auto-fit, minmax)
- Write media queries using the mobile-first approach
- Use clamp(), container queries, and responsive images
- Choose the right layout tool for each situation
Syllabus: 6 lessons
- Create a flex container and understand the main axis and cross axis
- Align and distribute elements with justify-content and align-items
- Space elements out with gap
- 02
Flexbox: Flexible Sizes and Wrapping
- Control item size with flex-grow, flex-shrink, and flex-basis
- Wrap items onto new lines with flex-wrap
- Build adaptive rows of cards without media queries
- 03
CSS Grid: Columns and Rows
- Define a grid with grid-template-columns and the fr unit
- Use repeat(), minmax(), and auto-fit for an adaptive grid
- Choose between Flexbox and Grid
- 04
CSS Grid: Named Areas and Placement
- Build a page template with grid-template-areas
- Place and span items with grid-column and grid-row
- Understand numbered grid lines
- 05
Media Queries and the Mobile-First Approach
- Configure the viewport correctly and make media fluid
- Write media queries using the mobile-first approach
- Choose breakpoints based on content
- 06
Modern Responsive: clamp(), Container Queries, and Adaptive Images
- Create fluid typography and spacing with clamp()
- Adapt a component to the size of its container with container queries
- Serve suitable images with srcset, sizes, and aspect-ratio
Final project
Responsive Home Page for an Online Store
Build the home page of a fictional store, mobile first: header with logo, search, and cart (Flexbox), banner with a fluid heading, product catalog in a self-adapting grid, a spanning featured product, filter sidebar, and footer. A reusable product card must adapt to its location with a container query.
Deliverables
- Semantic index.html and style.css
- Screenshots at 375px, 768px, and 1280px wide
- A grid-template-areas page template that changes between mobile and desktop
- A product card used in two locations of different widths
Assessment criteria
- Viewport meta tag present, no horizontal scrolling at 320px
- Mobile base styles and min-width media queries placed after them
- Flexbox and Grid used appropriately, spacing with gap
- Catalog using repeat(auto-fit, minmax(...)) with no overflow
- Fluid typography with clamp() including a rem unit
- Fluid images, with aspect-ratio or dimensions and srcset for the banner
- Logical HTML order despite visual placement
Frequently asked questions
Do I have to choose between Flexbox and Grid?
No, they are complementary. Flexbox aligns elements along one axis (menus, toolbars), Grid organizes them in rows and columns (catalogs, templates). The course shows when to use each and how to combine them.
What are the prerequisites for this responsive layout course?
You need to know the basics of HTML and CSS: selectors, the cascade, and the box model, taught in the HTML Fundamentals and CSS Fundamentals courses.
Are container queries usable in production?
Yes, they have been supported by all major browsers since 2023. The course presents them alongside media queries, which remain essential for overall layout.
What is the mobile-first approach?
It means writing the styles for small screens first, then adding adaptations for larger screens with min-width media queries. The code is simpler and the essential content is prioritized.
This course, told for your job
Say what you want to be able to do: “Responsive Layout (Flexbox, Grid)” takes its place in your path, with examples from your field. The concepts stay those of the course.