Podcasts Technology Syntax - Tasty Web Development Treats Hasty Treat - CSS Grid Masonry (Grid Level 3)

Hasty Treat - CSS Grid Masonry (Grid Level 3)

Published: Nov. 16, 2020, 2 p.m.

In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 \u2014 why it\u2019s such a cool thing and why they\u2019ve 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\u2019s an exception tracker, a session re-player and a performance monitor. Get 14 days free at\xa0logrocket.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\xa0and\xa0grid-template-rows\xa0can 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 \u2014 opens up a ton of possibilities and completes the functionality we use to dream of in CSS.
Links Tweet us your tasty treats!