BROADCASTS.com

b'

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

• https://drafts.csswg.org/css-grid-3/
• https://twitter.com/wesbos/status/1320735900343668738

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

• https://drafts.csswg.org/css-grid-3/#%23implicit-grid
• The implicit grid is formed in the same way as a regular grid container. However, it\\u2019s only used in the grid axis.
• Interesting in a column situation (see images).

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

• David DeSandro
• https://metafizzy.co/
• Chris Coyier
• https://caniuse.com/
• Isotope
• Flickity

Tweet us your tasty treats!

• Scott\\u2019s Instagram
• LevelUpTutorials Instagram
• Wes\\u2019 Instagram
• Wes\\u2019 Twitter
• Wes\\u2019 Facebook
• Scott\\u2019s Twitter
• Make sure to include\\xa0@SyntaxFM\\xa0in your tweets