A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 301: Hasty Treat - CSS Grid Masonry (Grid Level 3)



Nov 16th, 2020

Hasty Treat - CSS Grid Masonry (Grid Level 3)

👇 Download Show✏️ Edit Show Notes

In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it's such a cool thing and why they've been waiting for it for so long.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

04:33 - The spec

06:10 - How it works

  • masonry-auto-flow: next;
    1. It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down.
    2. Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column.
    3. grid-template-columns and grid-template-rows can now be marked as masonry and this specifies which axis will be masonry.

09:06 - The implicit grid

13:25 - Thoughts

  • Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS.

Tweet us your tasty treats!