Lucia P.
Sample The clamp lesson alone was worth it
I finally have a fluid type scale I understand instead of copying one from a generator.
Modern CSS layout with Grid, Flexbox and container queries
Build responsive page layouts and reusable components with today's CSS, without frameworks or fragile hacks
Created by Sofia Marquez
- Updated September 2026
- English
- Beginner
What you will learn
- Explain how the box model, normal flow and box-sizing affect every layout
- Build one dimensional layouts such as nav bars and toolbars with Flexbox
- Create two dimensional page layouts with CSS Grid, named areas and auto-fit tracks
- Make components respond to their container with container queries
- Use clamp(), min() and max() for fluid type and spacing
- Debug layout problems quickly with the browser's Grid and Flexbox inspectors
Course content
Layout fundamentals
CSS Grid foundations
- Video: Grid tracks, fr units and gap 12 min
- Video: Placing items with lines and spans 13 min
- Video: Named grid areas for page layouts 11 min
- Video: Responsive card grids with auto-fit and minmax 10 min
Going further with Grid
- Video: Subgrid for aligned card content 12 min
- Video: Overlapping items and layering 9 min
- Article: Alignment in Grid: the full picture 10 min
- Video: Debugging grids in dev tools 8 min
Components that respond to their container
- Video: Why media queries are not enough 8 min
- Video: Container queries in practice 14 min
- Video: Container query units 9 min
- Article: The :has() selector for layout states 10 min
Real page sections
- Video: Building a responsive navigation 15 min
- Video: A pricing table with aligned rows 13 min
- Video: Article layout with full bleed images 12 min
- Video: Sticky sidebars and scroll areas 10 min
Putting it together
- Article: Project brief: a small landing page 6 min
- Video: Building the page step by step 22 min
- Video: Testing across screens and zoom levels 10 min
- Article: Where to go next 5 min
- Quiz: Final check 5 min
Requirements
- Basic HTML: you know what elements and attributes are
- A code editor and a current browser such as Chrome, Firefox or Safari
Description
Layout used to be the hardest part of CSS. Floats, clearfix hacks and fixed pixel breakpoints made every page fragile. Modern CSS fixed most of that. Flexbox, Grid, container queries, logical properties and functions like clamp() are supported in every current browser, and together they let you build layouts that adapt on their own.
This course teaches those tools in the order you need them. We start with the box model and normal flow, because every layout bug you will ever chase comes back to them. Then we build real page sections: a navigation bar, a card grid, a holy grail page layout, a pricing table and a product card that changes shape depending on where it is placed.
What makes this course different
You will learn to choose the right tool rather than memorise properties. Flexbox for one dimension, Grid for two, container queries for components, media queries for the page. Each section ends with a small build you can reuse.
- Short lessons with one idea each
- A starter repository with every exercise
- Dev tools walkthroughs for debugging Grid and Flexbox
By the end
You will have a small library of layout patterns you understand line by line, and the confidence to open any design file and know how you would build it.
Who this course is for
- Beginners who can write some HTML and CSS but struggle with layout
- Developers still relying on CSS frameworks for grids
- Designers who want to understand how their layouts get built
Instructor
Sofia Marquez
Front end developer teaching CSS, accessibility and plain JavaScript that works for everyone
- 4.5 instructor rating
- 22 reviews
- 8,510 students
- 3 courses
- Sample
I am a front end developer who cares about the parts of the web that users touch directly: layout, typography, keyboard support and screen reader behaviour. I build design systems and marketing sites, and I audit interfaces for accessibility problems.
My teaching style is practical. We open the browser dev tools, break things on purpose and fix them. I prefer the platform first: semantic HTML, modern CSS and small amounts of JavaScript, before reaching for a library.
I also run small workshops for designers who want to understand what is easy and what is hard to build.
Student reviews
Nino K.
Sample Grid finally makes sense
The lesson on named grid areas changed how I plan pages. I now sketch the areas first and the CSS almost writes itself.
Marcus T.
Sample Container queries explained properly
I had read about container queries but never used them. The card example in section 4 is now in two of my projects.
Aiko S.
Sample Clear and well paced
Short lessons, one idea each. I would have liked a bit more on cascade layers, but the layout content is excellent.
Rafael M.
Sample Dropped my CSS framework
After this course I removed the grid utilities from a small client site and wrote about 80 lines of CSS instead. Easier to maintain.
Hannah B.
Sample Great dev tools walkthroughs
The debugging lessons with the Grid inspector were the most useful part for me. I fix layout bugs much faster now.
Omar F.
Sample Good, but slow start
The box model section was review for me and felt long. From Grid onward it was very useful.
Keep exploring
All Web Development courses
More in Web Development
$39.99
Enroll now