CSS Layout: Flexbox & Grid

Wishlist Share

About Course

Learn the two modern CSS layout systems. Use Flexbox to line items up in a row or column, distribute space and align them, and use CSS Grid to build two-dimensional page layouts with tracks, the fr unit, repeat(), minmax() and named areas. Includes worked examples and guidance on choosing between them.

Flexbox and Grid are supported in all current major browsers. Always test layouts in the browsers and screen sizes your users have.

What Will You Learn?

  • Build navigation bars, card rows and centred content with Flexbox Create page and gallery layouts with CSS Grid Use fr, repeat(), minmax(), auto-fit and gap confidently Choose the right tool and avoid common layout and accessibility mistakes

Course Content

Course Lessons

  • Flexbox fundamentals
  • Sizing flex items
  • CSS Grid fundamentals
  • Placing items and choosing Flexbox or Grid

Sources & Further Reading
The official guidance this course is based on.

Final Assessment

Student Ratings & Reviews

No Review Yet
No Review Yet

Want to receive push notifications for all major on-site activities?

✕