{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "masonry-grid-lanes-galerie",
 "name": "Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)",
 "name_en": "Native masonry gallery with CSS Grid Lanes",
 "kurz": "Atelierwand eines Antwerpener Modelabels: native grid-lanes mit Rückfall auf JS-Masonry, umschaltbar gegen CSS-Spalten und Raster, Spuren und kürzeste Spur sichtbar.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "editorial",
  "warm"
 ],
 "stimmung_roh": [
  "editorial",
  "ruhig",
  "organisch"
 ],
 "technik": [
  "css",
  "css-grid",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Bilder unterschiedlicher Höhe, Hoch- und Querformate, werden lückenlos in Spuren gepackt, ohne Zuschnitt. Seit 2026 geht das nativ mit display: grid-lanes. Die Spuren definiert man wie bei Grid über grid-template-columns, jedes Element fließt in die gerade kürzeste Spur. Browser ohne Unterstützung bekommen ein normales Grid, CSS-Spalten (column-count) oder eine JS-Masonry.",
  "warum_es_wirkt": "Die Formate bleiben unbeschnitten. Die Wand wirkt dicht, lebendig und kuratiert statt rasterstarr. Nativ springt nach dem Laden nichts, und bei jeder Größenänderung entfällt die Neuberechnung per JS.",
  "wann_einsetzen": "Fotografie- und Moodboard-Galerien, Referenzwände, Inspirations-Feeds, Wände mit Kundenstimmen, Blog-Kartenlisten mit unterschiedlich langen Texten.",
  "wann_nicht": "Wenn die Reihenfolge streng gelesen werden muss, etwa chronologisch: Masonry gibt die Zeilenlogik auf. Bei gleich hohen Elementen reicht ein normales Grid. Bei wenigen Bildern (unter etwa acht).",
  "varianten": [
   "Nativ: display: grid-lanes mit repeat(auto-fill, minmax(…, 1fr))",
   "Feste Spaltenzahl je Breakpoint (1fr 1fr / 1fr 1fr 1fr) mit column-count als Rückfall (mwop.net)",
   "Rückfall mit flex-wrap und zentrierten Elementen (mwop.net)",
   "JS-Masonry mit absolut positionierten Elementen (Pinterest)",
   "Einzelne Elemente über zwei Spuren (grid-column: span 2) für Rhythmus"
  ],
  "umsetzung": "Browserstand (caniuse, geprüft 31.10.2026): Safari und Safari iOS unterstützen display: grid-lanes ab 26.4 (März 2026). Chrome und Edge bis Version 159 nur hinter dem Flag „CSS Grid Lanes Layout“, Firefox nur hinter Flag mit der alten Syntax grid-template-rows: masonry. Deshalb immer mit Rückfall. Einfach: .wand { display: grid; display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem }. Robuster für die Lesereihenfolge (Manuel Matuzović): erst ein normales Grid, dann @supports (display: grid-lanes) and (reading-flow: grid-rows) { .wand { display: grid-lanes; reading-flow: grid-rows } }. Gegen hin- und herspringende Platzierung hilft die Toleranz: Spuren, deren Füllhöhe weniger als den Wert auseinanderliegt, gelten als gleich hoch. Safari 27.2 (Beta, laut web.dev September 2026) benennt die Eigenschaft von flow-tolerance in fit-tolerance um. Deshalb beide setzen, neuer Name zuerst: fit-tolerance: 2rem; flow-tolerance: 2rem. Danach mit der Tastatur testen. Rückfall-Optik: quadratisch zuschneiden (@supports not: aspect-ratio 1, object-fit cover, WebKit-Empfehlung) oder column-count mit break-inside: avoid. Wer echte Masonry überall braucht, lädt eine kleine JS-Masonry nur, wenn CSS.supports('display', 'grid-lanes') falsch ist. Bilder mit width und height, damit nichts nachspringt.",
  "mobil": "Ein bis zwei Spuren über minmax und auto-fill. Die native Lösung braucht beim Drehen oder Ändern der Breite keine Neuberechnung.",
  "reduzierte_bewegung": "Das Layout selbst bewegt sich nicht. Einblend- und Umsortier-Animationen der Kacheln weglassen.",
  "barrierefreiheit": "Hauptrisiko: Die sichtbare Reihenfolge weicht von der DOM-Reihenfolge ab, der Tab-Fokus springt. Wo verfügbar reading-flow: grid-rows setzen, dazu fit-tolerance (bis Safari 27.1 flow-tolerance, beide setzen) und mit der Tastatur testen. CSS-Spalten lesen spaltenweise und passen hier am schlechtesten. Alt-Texte für alle Bilder; in einer Galerie zusätzlich ein Leuchtkasten mit Pfeiltasten."
 },
 "messwerte": {
  "easing": "",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "gap 1rem; Spurbreite minmax(180px, 1fr) bzw. minmax(14rem, 1fr)",
  "sonstiges": "mwop.net: 2 Spalten ab 1024px, 3 ab 1280px; Pinterest-JS-Masonry: transform-Transition .2s beim Einfügen.",
  "herkunft": "beobachtet",
  "quelle": "https://mwop.net/assets/css/site.c600634f35bd.css; https://www.pinterest.com/ideas/gestalt-304086bd93cae83e.css"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "mwop.net (Matthew Weier O'Phinney)",
   "url": "https://mwop.net/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft im Stylesheet: mehrere Bereiche mit @supports (display: grid-lanes). .gallery{display: grid-lanes; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))}, Fallback @supports not → flex, flex-wrap, justify-content: space-evenly. .comics-grid ab 1024px 2 Spalten, ab 1280px 3 Spalten (1fr 1fr 1fr), Fallback column-count 2/3. Auch Startseiten-Kunstgalerie, Postliste und Suchergebnisse nutzen grid-lanes mit grid als Fallback.",
   "art": "website"
  },
  {
   "seite": "Pinterest – Ideas",
   "url": "https://www.pinterest.com/ideas/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft: Feed in div.masonryContainer (data-test-id masonry-container), Gestalt-CSS .Masonry_O und .Masonry__Item__Mounted_O{transition: transform .2s} – JS-Masonry mit per transform positionierten Kacheln, also die klassische Variante, die grid-lanes ablösen soll.",
   "art": "website"
  },
  {
   "seite": "Savee",
   "url": "https://savee.com/",
   "auszeichnung": "",
   "beobachtung": "Im CSS-Bundle stehen columns-3/columns-4 (column-count) und break-inside: avoid, mobil columns-2 – typisch für eine CSS-Spalten-Masonry; die konkrete Galerie-Seite wurde nicht geprüft.",
   "art": "website-ungeprueft"
  },
  {
   "seite": "WebKit – Grid Lanes Photos Demo",
   "url": "https://webkit.org/demos/grid3/photos/",
   "auszeichnung": "",
   "beobachtung": "Offizielle Demo mit umschaltbaren Layouts: klassisch repeat(auto-fill, minmax(14rem, 1fr)) mit gap 1rem; Ränder-Variante 14ch repeat(auto-fill, minmax(28ch, 1fr)) 14ch; abwechselnd schmale/breite Spuren minmax(8rem,1fr) minmax(14rem,2fr); jede 5. Karte span 2.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "WebKit – Introducing CSS Grid Lanes",
   "url": "https://webkit.org/blog/17660/introducing-css-grid-lanes/"
  },
  {
   "titel": "WebKit – When will CSS Grid Lanes arrive? How long until we can use it? (01/2026, Fallback-Strategien)",
   "url": "https://webkit.org/blog/17758/when-will-css-grid-lanes-arrive-how-long-until-we-can-use-it/"
  },
  {
   "titel": "Manuel Matuzović – Progressively enhancing Grid Lanes (06/2026)",
   "url": "https://matuzo.at/blog/2026/grid-lanes-progressive-enhancement"
  },
  {
   "titel": "WebKit Features for Safari 26.4 (03/2026)",
   "url": "https://webkit.org/blog/17862/webkit-features-for-safari-26-4/"
  }
 ],
 "kombinierbar_mit": [
  "galerie-shared-element-vollbild",
  "flip-zustandswechsel",
  "testimonials-neu-gedacht",
  "unendliche-leinwand-galerie"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo"
 },
 "herkunft": {
  "quelldateien": [
   "patch-luecken-a.json"
  ],
  "pruefnotizen": [
   "02.11.2026: Priorität C → B (Lückenrecherche K2), weil steht in 5 Rezepten, Priorität C widersprach der tatsächlichen Nutzung."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Atelierwand eines Antwerpener Modelabels: native grid-lanes mit Rückfall auf JS-Masonry, umschaltbar gegen CSS-Spalten und Raster, Spuren und kürzeste Spur sichtbar.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "nativ": "display: grid; display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(min(var(--spur), 100%), 1fr)); reading-flow: grid-rows; align-items: start; fit-tolerance: 2rem; flow-tolerance: 2rem (Rückfall auf den alten Namen)",
   "spur": "14rem; Telefon (≤ 640 px) 9.5rem; Vorschau 10rem",
   "gap": "1rem; Telefon 0.75rem",
   "span": "grid-column: span 2 für Querformate (Kai, Farbkarte), nativ und in der JS-Masonry",
   "standard": "grid-lanes, wenn CSS.supports('display', 'grid-lanes'), sonst JS-Masonry",
   "rueckfall_js": "Spuren = floor((Breite + gap) / (spur + gap)); jedes Element in die kürzeste Spur (span 2: niedrigste Doppelspur), Lage per translate, Containerhöhe gesetzt; neu bei Breitenänderung (ResizeObserver) und nach document.fonts.ready",
   "rueckfall_spalten": "columns: var(--spur); column-gap: var(--gap); .stein break-inside: avoid; margin-bottom: var(--gap)",
   "rueckfall_raster": "normales Grid, .bild aspect-ratio 1, SVG preserveAspectRatio xMidYMid slice",
   "easing": "cubic-bezier(0.25, 1, 0.5, 1)",
   "flip_ms": 250,
   "flip": "nur Position (transform translate → none), keine Einblendung",
   "ui_ms": 200,
   "unterstreichung_ms": 100,
   "bild_hover": "scale 1 → 1.035 in 1000 ms (nur hover: hover)",
   "leuchtkasten": "Überblendung opacity 0 → 1 in 1000 ms; Pfeiltasten, Esc, Fokus zurück auf die Kachel",
   "vorfuehrung": "alle 2200 ms: Spalten → Raster → Standard → Filter Looks → Alle, Spuren eingeblendet"
  },
  "ausloeser": "klick",
  "touch": "Kein Hover-Zoom, Tippen öffnet den Leuchtkasten. Unter 640 px zwei Spuren (9.5rem, gap 0.75rem), Filterleiste waagerecht wischbar, Pult als Knopf eingeklappt.",
  "reduziert": "Filter und Layoutwechsel springen ohne FLIP, kein Bild-Zoom, der Leuchtkasten wechselt ohne Überblendung. Das Layout selbst bleibt gleich.",
  "korrekturen": {
   "beschreibung": "Bilder unterschiedlicher Höhe, Hoch- und Querformate, werden lückenlos in Spuren gepackt, ohne Zuschnitt. Seit 2026 geht das nativ mit display: grid-lanes. Die Spuren definiert man wie bei Grid über grid-template-columns, jedes Element fließt in die gerade kürzeste Spur. Browser ohne Unterstützung bekommen ein normales Grid, CSS-Spalten (column-count) oder eine JS-Masonry.",
   "warum_es_wirkt": "Die Formate bleiben unbeschnitten. Die Wand wirkt dicht, lebendig und kuratiert statt rasterstarr. Nativ springt nach dem Laden nichts, und bei jeder Größenänderung entfällt die Neuberechnung per JS.",
   "wann_einsetzen": "Fotografie- und Moodboard-Galerien, Referenzwände, Inspirations-Feeds, Wände mit Kundenstimmen, Blog-Kartenlisten mit unterschiedlich langen Texten.",
   "wann_nicht": "Wenn die Reihenfolge streng gelesen werden muss, etwa chronologisch: Masonry gibt die Zeilenlogik auf. Bei gleich hohen Elementen reicht ein normales Grid. Bei wenigen Bildern (unter etwa acht).",
   "varianten": [
    "Nativ: display: grid-lanes mit repeat(auto-fill, minmax(…, 1fr))",
    "Feste Spaltenzahl je Breakpoint (1fr 1fr / 1fr 1fr 1fr) mit column-count als Rückfall (mwop.net)",
    "Rückfall mit flex-wrap und zentrierten Elementen (mwop.net)",
    "JS-Masonry mit absolut positionierten Elementen (Pinterest)",
    "Einzelne Elemente über zwei Spuren (grid-column: span 2) für Rhythmus"
   ],
   "umsetzung": "Browserstand (caniuse, geprüft 31.10.2026): Safari und Safari iOS unterstützen display: grid-lanes ab 26.4 (März 2026). Chrome und Edge bis Version 159 nur hinter dem Flag „CSS Grid Lanes Layout“, Firefox nur hinter Flag mit der alten Syntax grid-template-rows: masonry. Deshalb immer mit Rückfall. Einfach: .wand { display: grid; display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem }. Robuster für die Lesereihenfolge (Manuel Matuzović): erst ein normales Grid, dann @supports (display: grid-lanes) and (reading-flow: grid-rows) { .wand { display: grid-lanes; reading-flow: grid-rows } }. Gegen hin- und herspringende Platzierung hilft die Toleranz: Spuren, deren Füllhöhe weniger als den Wert auseinanderliegt, gelten als gleich hoch. Safari 27.2 (Beta, laut web.dev September 2026) benennt die Eigenschaft von flow-tolerance in fit-tolerance um. Deshalb beide setzen, neuer Name zuerst: fit-tolerance: 2rem; flow-tolerance: 2rem. Danach mit der Tastatur testen. Rückfall-Optik: quadratisch zuschneiden (@supports not: aspect-ratio 1, object-fit cover, WebKit-Empfehlung) oder column-count mit break-inside: avoid. Wer echte Masonry überall braucht, lädt eine kleine JS-Masonry nur, wenn CSS.supports('display', 'grid-lanes') falsch ist. Bilder mit width und height, damit nichts nachspringt.",
   "mobil": "Ein bis zwei Spuren über minmax und auto-fill. Die native Lösung braucht beim Drehen oder Ändern der Breite keine Neuberechnung.",
   "reduzierte_bewegung": "Das Layout selbst bewegt sich nicht. Einblend- und Umsortier-Animationen der Kacheln weglassen.",
   "barrierefreiheit": "Hauptrisiko: Die sichtbare Reihenfolge weicht von der DOM-Reihenfolge ab, der Tab-Fokus springt. Wo verfügbar reading-flow: grid-rows setzen, dazu fit-tolerance (bis Safari 27.1 flow-tolerance, beide setzen) und mit der Tastatur testen. CSS-Spalten lesen spaltenweise und passen hier am schlechtesten. Alt-Texte für alle Bilder; in einer Galerie zusätzlich ein Leuchtkasten mit Pfeiltasten."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept mode-beauty-kollektion, erfundenes Modelabel RUIEN aus Antwerpen (Kloosterstraat 41), Kollektion „Laagwater“ HW 2026. Zalando Sans wdth 125, Fragment Mono für Rubriken, EB Garamond Italic als zweite Stimme, Off-White #f6f3ee, Fast-Schwarz. Alle 20 Bilder sind eigene Inline-SVGs: technische Zeichnungen der sieben Looks mit SVG-Stoffmustern (Fischgrat, Blütenjacquard, Plissee, Rippe, Fenstercheck), Stoffproben mit Zackenschnitt, Hornknopf, Webetikett, Farbkarte, Kai bei Niedrigwasser, Schaufenster, dazu drei Textkarten. Als Moodboard bewusst kein Produktraster, die 3:4-Regel des Rezepts gilt hier nicht. Pult: grid-lanes / CSS-Spalten / JS / Raster und „Spuren zeigen“ mit Füllhöhe je Spur und markierter kürzester Spur; ohne Unterstützung zeigt „grid-lanes“ den Grid-Rückfall mit Lücken. Headless-Chromium kennt grid-lanes nicht, dort läuft die JS-Masonry. Referenzen: webkit.org, mwop.net, driesvannoten.com, ssense.com, lemaire.fr. AD-Review 01.11.2026: Note 5 (Spurenzahl in der Statuszeile bricht auf dem Telefon nicht mehr um). Zugang 02.11.2026: --meta #8c857b → #6a6359 (5,4:1 auf Grund, 4,8:1 auf Karte), auch Hex-Beschriftung der Farbkarte; Leiste unter 640 px flex-wrap: nowrap (mehrzeiliger Flex-Container dehnte Filter und Status auf Inhaltsbreite, +98 px bei 320 px); Pult-Breite min(336px, 100vw − 32px); Kontrastmodus-Rahmen für Knöpfe. Korrektur 02.11.2026: Safari 27.2 benennt flow-tolerance in fit-tolerance um (web.dev, Web Platform September 2026, Beta-Teil). Demo setzt fit-tolerance: 2rem und flow-tolerance: 2rem, Werte-Pult zeigt beide Namen und welcher hier greift; umsetzung und barrierefreiheit über korrekturen angepasst."
 }
}