Skip to content
Chapter 04 of 07 · 3 lessons · ~30 min

Flexbox and Grid

Build real layouts with Flexbox and Grid, and finally learn how to center anything, horizontally and vertically.

YOUR PROGRESS0%
/ Lessons in this chapter
10
CSS Flexbox Tutorial for Beginners How to line up elements in rows and columns with Flexbox, and control spacing and alignment. Coming soon
11
How to Center a Div in CSS Five reliable ways to center anything in CSS, and which one to use when. Coming soon
12
CSS Grid Tutorial for Beginners How to build two-dimensional layouts with CSS Grid, including responsive galleries that need no media queries. Coming soon

Chapter practice task

Task: Lay out a services section and a portfolio gallery

  1. Turn your header into a flex row with the logo on the left and links on the right.
  2. Center your hero text vertically and horizontally.
  3. Build a three-column services section with Flexbox and gap.
  4. Build a portfolio gallery with Grid that changes columns automatically by screen size.
  5. Make one gallery item span two columns.

By the end of this chapter

  • You can build rows and columns with Flexbox and control alignment and spacing
  • You can center any element in at least three ways
  • You can build responsive grids without media queries

Quick answers for this chapter

Flexbox or Grid?

Flexbox for one direction (a row or a column), Grid for two directions (rows and columns at once).

Do I still need floats?

No. Floats are only for wrapping text around an image now.

Do Flexbox and Grid work in all browsers?

Yes, in every modern browser.