Hasty Treat - CSS Grid Masonry (Grid Level 3)

Hasty Treat - CSS Grid Masonry (Grid Level 3)

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 https://drafts.csswg.org/css-grid-3/ https://twitter.com/wesbos/status/1320735900343668738 06:10 - How it works masonry-auto-flow: next; 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. 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. 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 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’s only used in the grid axis. Interesting in a column situation (see images). 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. Links David DeSandro https://metafizzy.co/ Chris Coyier https://caniuse.com/ Isotope Flickity Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Jaksot(988)

964: Markdown as a CMS is a bad idea

964: Markdown as a CMS is a bad idea

In this potluck episode of Syntax, Wes and Scott answer your questions about keyboard shortcuts, choosing frameworks in the age of AI, markdown vs CMSs, backup strategies, moving countries for work, s...

17 Joulu 20251h 3min

963: Hardware Hacking with Matt Brown

963: Hardware Hacking with Matt Brown

Scott and Wes chat with YouTuber and security consultant Matt Brown about breaking into IoT devices, extracting firmware, and decoding the hidden tech inside everyday gadgets. Matt shares his methods,...

15 Joulu 202558min

962: The Home Server / Synology Show

962: The Home Server / Synology Show

Wes and Scott talk about their evolving home-server setups—Synology rigs, Mac minis, Docker vs. VMs, media servers, backups, Cloudflare Tunnels, and the real-world pros and cons of running your own ha...

10 Joulu 202535min

961: Keeping Up With The Fast and Furious Web

961: Keeping Up With The Fast and Furious Web

Scott and CJ go live from JS Nation NYC to talk about how developers can actually stay current without drowning in the constant churn of new tools and trends. They break down how to see through the fl...

8 Joulu 202528min

960: Reacting to the Weird + Creative Corners of the Web

960: Reacting to the Weird + Creative Corners of the Web

Wes and Scott talk about the weird, creative corners of the web—from live-coded music with Strudel and wild Hydra visuals to shader wizardry, projection-mapping art, fully synced Christmas lights, and...

3 Joulu 202527min

959: TypeScript on the GPU with TypeGPU creator Iwo Plaza

959: TypeScript on the GPU with TypeGPU creator Iwo Plaza

Scott and CJ sit down live at JSNation NYC with Iwo Plaza, creator of TypeGPU, to dig into how WebGPU is unlocking a new wave of graphics and compute power on the web. They chat about shader authoring...

1 Joulu 202525min

958: 2025 Holiday Gift Guide

958: 2025 Holiday Gift Guide

The Syntax team brings us their annual Holiday Gift Guide! They’ve curated the best gadgets, tools, food, and even kitchen essentials for the dev in your life — plus a few treats anyone would love to ...

26 Marras 20251h 5min

957: CSS: Advanced and Obscure

957: CSS: Advanced and Obscure

Scott and Wes face off in a CSS-themed round of STUMP’d, quizzing each other on shape functions, scroll snap types, obscure functions, and long-forgotten spec history. From ray() to cross-fade() to pr...

24 Marras 202537min

Suosittua kategoriassa Politiikka ja uutiset

uutiscast
aikalisa
ootsa-kuullut-tasta-2
rss-ootsa-kuullut-tasta
politiikan-puskaradio
tervo-halme
rss-vaalirankkurit-podcast
rss-podme-livebox
rss-asiastudio
otetaan-yhdet
viisupodi
et-sa-noin-voi-sanoo-esittaa
rikosmyytit
the-ulkopolitist
rss-tasta-on-kyse-ivan-puopolo-verkkouutiset
aihe
radio-antro
rss-hyvaa-huomenta-bryssel
rss-merja-mahkan-rahat
rss-girls-finish-f1rst