Native Masonry and Layout Fixes End Hacky Workarounds

Scott Tolinsky kicks off with the Grid Lines API (display: grid-lines), calling it the "best possible thing" for Pinterest-style masonry layouts. Unlike CSS columns, which snake vertically, or imperfect grid pack-fit hacks requiring fixed heights, this fills items left-to-right (or customizable directions) using familiar grid-template-columns and gap. Wes Bos agrees it's dead simple—no new learning curve—and opens creative doors beyond photo grids, like shuffling footer links. Available now in Safari 26.4, behind flags in Chrome/Firefox.

Multi-column CSS gets usable fixes with column-wrap and column-height. Previously, specifying columns forced horizontal overflow; now excess text wraps to new rows. Ideal for unbroken paragraphs (vs. segmented divs in flexbox). Scott notes he avoided multi-column before, but these tweaks make it viable. Sticky positioning now works per-axis (Chrome 148), perfect for horizontal-scroll tables in tournaments or conferences—tables notoriously tough on mobile.

Wes and Scott lament MDN demos' shortcomings, pushing for better examples to showcase these evolutions.

HTML-in-Canvas Unlocks Next-Gen, Accessible UI Effects

Wes geeks out over the experimental HTML-in-Canvas API (Chrome flag), letting you nest regular HTML inside <canvas> and paint it via JS APIs like requestDrawing(). Solves canvas's HTML-drawing limits and accessibility woes—no more custom input code or SVG hacks.

Demos steal the show:

  • Pixelated, editable form inputs.
  • Magnifying glass distorting live text.
  • Frosted glass: mouse "wipes" blur from underlying content, random each load.
  • Matt Rothenberg's form: glowing focus borders track inputs; submit scan-line stretches/blurs content off-page.
  • Jelly slider: pure <input> with wobbly canvas effects.
  • Jake Archibald's CRT curve on editable HTML.

Scott calls it a "powerhouse," preserving DOM interactivity/accessibility. Wes ties it to unfulfilled Houdini dreams, enabling shaders, warps, and pixel control—like iOS volume sliders pushing content. He plans more demos; both hope it ships despite experimental status.

"The world has opened up to me," Wes says of discovering it. "You can put most HTML inside of a canvas element and then apply any shaders or whatever things that you want."

Scoped and Dynamic Styling Boosts Maintainability

Name-only container queries (Firefox 149, Chrome/Safari 148/26.4) scope CSS via container-name: sidebar and @container sidebar {}—no size/style queries needed. Scott spotted it via Chris Coyier; Wes praises it over @scope's clunky feel, combining scoping with queries (style queries incoming). Baked-in, class-free alternative to scoping hacks.

CSS random(0, 10, 2) generates even numbers between bounds—Wes's favorite for avoiding JS vars, seeded randoms for SSR, or manual card rotations. Safari-only for now.

::search-text and ::search-text:current style browser find-in-page highlights, including the active match. Scott loves theming beyond default yellow; Wes gripes about lazy-loaded sites (e.g., Twitter) not re-highlighting—calls for DOM-change awareness.

Safari axed haptic feedback workarounds (checkbox switch toggles), enforcing user-gesture rules like popups/audio. Frustrates Wes/Scott, who see native apps abusing it.

Border shapes improve; element-scoped view transitions enable cleaner animations.

"Every time I need randomness in CSS, I have to go into my view layer... This is a straight-up CSS API," Wes explains.

Trade-offs: Hype vs. Practical Power in a Tailwind World

Hosts critique AI obsession and Tailwind dominance sidelining CSS innovation—none of these in Tailwind yet. Scott: "There's so much cool stuff added to CSS that is super powerful." Wes: "CSS that doesn't get the props that it needs." They urge playing with flags, linking syntax.fm/996 for demos/posts (e.g., WebKit on grid-lines).

"Can it like get any more simple than that? It is really super cool. That's it. There's nothing to learn here," Scott on grid-lines.

Key Takeaways

  • Use display: grid-lines today in Safari for effortless masonry—no more column hacks or fixed heights.
  • Experiment with HTML-in-canvas (Chrome flag) for canvas effects on live, accessible DOM elements like inputs.
  • Scope styles natively with name-only container queries: container-name + @container beats class bloat.
  • Generate CSS randomness with random() to skip JS for rotations, avoiding SSR seeding headaches.
  • Style ::search-text:current for branded find-in-page; push sites to handle lazy-load re-highlights.
  • Leverage bi-directional sticky for complex tables; multi-column column-wrap for paragraph flows.
  • Check flags in Chrome/Firefox/Safari 26.4+; ignore Tailwind gaps—pure CSS ships faster.
  • Build demos like frosted glass or CRT curves to prototype next-gen UIs without accessibility loss.