Inautilo#Development #Guides
Alignment in CSS Grid Lanes · How alignment works across grid and stacking axes https://ilo.im/16dws2
_____
#ModernCSS #Layouts #Masonry #Alignment #WebDev #Frontend #CSS #CssGrid #GridLanes
Holger HellingerFinally as TP in Safari. Firefox hides it since long behind a feature flag.
The most underrated feature in CSS where people do stupid workarounds with JS since years.
The Field Guide to CSS Grid Lanes
https://gridlanes.webkit.org/
BramusThere, I fixed it:
:root {
--masonry: grid-lanes;
}
.container {
display: var(--masonry);
}
Jen Simmons@jensimmons.bsky.social And learn more watching Learn CSS Grid Lanes at #WWDC26!
WWDC26: Learn CSS Grid Lanes | Apple
Jen SimmonsAnd learn more watching Learn CSS Grid Lanes at #WWDC26!
youtu.be/NDwoB2PpwgY
#css #gridlanes #cssday #thewebyouwant
WWDC26: Learn CSS Grid Lanes |...
WWDC26: Learn CSS Grid Lanes |...
WWDC26: Learn CSS Grid Lanes | Apple
Sebastian Lasse@w3cdevs @w3c @mdn @dontcallmeDOM
2 urgent and rude wishes :
- Check out which engine has most data in https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Intl
Some are missing the Federal States, some are missing some Language or Currrency Names and also some have more knowledge of Timezones.
Let all other engines paste it.
It is easy and boring ;) but we need #Intl more than ever
#JS
- After all the years make masonry grid reality
(after 1000 name changes not sure how it is called now);
https://github.com/w3c/csswg-drafts/issues/9733
#masonry #gridlanes #CSS
Intl - JavaScript | MDN
Das Intl Namensraum-Objekt enthält mehrere Konstruktoren sowie Funktionen, die den Internationalisierungs-Konstruktoren und anderen sprachsensitiven Funktionen gemeinsam sind. Zusammen bilden sie die ECMAScript Internationalization API, die sprachsensitive Zeichenfolgenvergleiche, Nummernformatierung, Datums- und Zeitformatierung und mehr bietet.
AntoineExperimenting browsing pixelfed in "contact sheet" mode
For those curious : https://paste.lol/antoine/pixelfed.social.css
(I use it with stylebot)
pixelfed.social.css
/** * Pixelfed custom UI/UX - "Contact Sheet" mode * Inject this CSS on pixelfed main page and experience contact sheet, distraction less, pixelfed photos browsing. * Personnaly using Stylebot for CSS injection */ html:has(.timeline-status-component) { --min-photo-inline-size: 400px; nav.navbar, .card:not(:hover) .card-header, .card:not(:hover) > :not(.timeline-status-component-content), .read-more-component, .sidebar-attribution, .sidebar-component .card, ...
David RoessliI know what I’m going to play with over the holidays break 😍 #css #gridlanes
