The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Turning a flexbox into a grid using flex-wrap and align-content

Turning a flexbox into a grid using flex-wrap and align-content

1:47
Adding flex-wrap to a flexbox container allows the items to form a grid. The content can then be aligned and distributed along the grid using justify-content and align-content.
Watch this lesson now
Avatar
egghead.io

Adding flex-wrap to a flexbox container allows the items to form a grid. The content can then be aligned and distributed along the grid using justify-content and align-content.

Avatar
Chester

Pretty good lesson. My mind was a bit blasted at the grow and shrink concepts, but I'm sure I'll get it as soon as I start playing around with it.

Out of curiosity, how would you align the orphaned image on the last row to be aligned to the left, rather than to the middle?

Thanks guys!

Avatar
Rolando

Amazing series, thank you!

In reply to egghead.io
Avatar
Garth

Sadly there isn't a CSS only solution right now. One solution is to add extra items with zero height so they take up the same space but aren't visible.

Hopefully, in the future, there will be support for multiple ::after pseudo elements which will be treated like real DOM children.

In reply to Chester
Avatar
James

Short and to the point. Brilliant!

With flexbox and post-css, I'm kind of thinking I don't need Sass/Less anymore.

Avatar
Garth

It's my current favorite flavor of CSS.

In reply to James
Avatar
Fareez

awesome tutorial. in the grid example, what would you do if you wanted to remove all spaces between pictures?

Avatar
Garth

Change space-between or space-around to flex-start, flex-end, or center (depending on the justification you want).

In reply to Fareez
Avatar
Zhenyang Hua

It seems using align-items: center; similar to what align-content: space-around; does in this example. What is the difference when using align-items and align-content?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?