Hasty Treat - CSS Grid Masonry (Grid Level 3)

<p class="has-line-data" data-line-start="7" data-line-end="8">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.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 04:33 - The spec</p> <ul> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://drafts.csswg.org/css-grid-3/">https://drafts.csswg.org/css-grid-3/</a></li> <li class="has-line-data" data-line-start="16" data-line-end="18"> <a href= "https://twitter.com/wesbos/status/1320735900343668738">https://twitter.com/wesbos/status/1320735900343668738</a></li> </ul> <p class="has-line-data" data-line-start="18" data-line-end="19"> 06:10 - How it works</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="24"> <code>masonry-auto-flow: next;</code> <ol> <li class="has-line-data" data-line-start="20" data-line-end="21"> 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.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> 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.</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <code>grid-template-columns</code> and <co