Masonry rozloženie je teraz Grid Lanes

Veľa sme tu na CSS-Tricks hovorili o Masonry rozložení, takže nemusíme vám pripomínať obojstranné diskusie o tom, ako k nemu pristúpiť, myšlienku použitia ako nový zjednocujúci koncept rozloženia, alebo alternatívne prístupy, aby fungovalo dnes.

Tu je to, čo potrebujete vedieť: bude to display: grid-lanes.

Najskoršie rozhovory týkajúce sa masonry začali v roku 2017, keď Rachel Andrew vyjadrila určité obavy, ako vytvoriť Pinterest masonry rozloženie. Rachel povedala, že sa jej zdá, že správny prístup by mal byť niečo ako flexbox, ale toto nebolo úplne dosiahnuteľné s flexboxom, pretože prvky by sa radšej umiestňovali zhora nadol, než naprieč každým riadkom:

Momentálne najbližšie, čo môžete dosiahnuť s CSS pri tomto type rozloženia, je použiť multi-col, avšak prvky sa potom umiestňujú zhora nadol, než naprieč riadkami.

Toto sa zdá byť skôr správanie flexboxu než gridu, pretože riešenie je veľmi založené na veľkosti prvkov. Otváram toto, aby som zaznamenala požiadavku na funkciu/prípad použitia pre budúcu diskusiu.

A tak sa začali rozhovory o masonry rozložení v CSS v rámci W3C. V tom istom vlákne na GitHube si prečítate, že Tab Atkins-Bittner zdieľal “hacky” spôsob, ako to urobiť s CSS Grid.

Môžete mať Grid, ktorý robí Masonry, ak poznáte výšky prvkov vopred. Je to trochu hacky, ale nastavíte grid kontajner na grid: auto-flow dense 1px / <šírky stĺpcov tu>;, potom nastavíte každý prvok na grid-row: span <výška v pixeloch ako celé číslo>; (napríklad, ak je prvok vysoký 50px, použite grid-row: span 50;).

Som milovník chytrých CSS hackov, ale viete čo ďalšie mám rád? Funkčné CSS riešenie, ktoré uľahčuje používanie začiatočníkom. A nie, bohužiaľ, nemôžeme použiť grid-template-rows alebo grid-template-columns, ako navrhol Nate Green v tom istom vlákne:

.figure-list { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: flow;
}

Atkins-Bittner odpovedal:

Neexistuje žiadny “jednoduchý” sposôb, ako prispôsobiť Grid pre Masonry – čokoľvek by zahŕňalo netriviálne úpravy algoritmu rozloženia. Packery, konkrétne, naozaj potrebuje, aby veci mali definovanú šírku.

Okej, to je v poriadku. Som si istý, že by ste si tiež mysleli, "prečo nevytvoriť novú vlastnosť display pre to?" No, Rachel dodala, že:

Vec je v tom, že nemôžeme vytvoriť úplne novú hodnotu display pre každý jednotlivý dizajnový vzor.

Majte na pamäti, že všetky tieto diskusie sa dialy už v roku 2017, čo znamená, že masonry bol nedosiahnuteľným cieľom už dosť dlhú dobu.

Len aby som sa uistil, že ste so mnou, toto je príklad obrázka druhu rozloženia, ako masonry vyzerá (vďaka Michaelovi Richinsovi za toto):

Jedna vec, ktorú by som chcel, je to, že pred oznámením typu zobrazenia masonry sa diskutovalo o riešeniach/hackoch, ako je tento od Andyho Barefoota, ale nič sa skutočne nerozhodlo ako hlavná funkcia pre CSS masonry. Hej, dokonca tam bola super cool Masonry knižnica od Davida DeSandra, a on dal celkom užitočnú radu W3C a výrobcom prehliadačov pri písaní špecifikácie a implementácii masonry rozloženia, ako o tom, ako by fungovalo načítavanie obrázkov, prvky preklenujúce viacero stĺpcov, vypĺňanie medzier, zachovanie horizontálneho poradia.

Pozrite si Masonry.js dokumentáciu pre viac informácií o možnostiach objektu.

Toto vlákno pomohlo, ale stále to neviedlo k záverečnému vyhláseniu o tom, ako bude vyzerať masonry syntax. V skutočnosti sme mali návrhy kódu, ako od Dana Tonona:

.flex-container { display: flex; flex-direction: column; flex-block-count: 2; flex-block-flow: cross; }

Toto zavádza dve nové vlastnosti flexboxu nazývané flex-block-count a flex-block-flow ktoré nám umožňujú ovládať prvky podobne (s column-count) a ovládať tok prvkov. Avšak, toto by nefungovalo, ako Michael Richins poukázal:

Toto stále nebude fungovať pre potomkov rôznych výšok…

Toto vlákno nikam neviedlo, takže diskusie skončili v apríli 2020 s používateľom GitHubu s menom Nic787, ktorý sa odvolával a súhlasil s predchádzajúcim pravdepodobným riešením pre masonry použitím float namiesto grid.

Myslím, že máte dobrý argument. Momentálne float starne a flexbox umožňuje urobiť veľa vecí, ale toto masonry rozloženie chýba v oboch.

... Niekedy môžete mať veľa malých obrázkov v riadku, takže aby to fungovalo zľava doprava, nemôže to fungovať stále. Masonry je zľava doprava ako vždy, ale istým spôsobom je to jednoduchšie pre používateľa na prístup k informáciám.

Našťastie diskusie stále pokračovali v mnohých vláknach, a požiadavky na vlastnosť zobrazenia masonry zaplavili W3C. Ďalšie významné vlákno na GitHube, ktoré sa objavilo v debate o masonry, je, no, tá Debata o Masonry Syntaxi v novembri 2024, ale to tiež neviedlo k veľa v tom čase. V skutočnosti, Jen Simmons poznamenala na stretnutí že:

Osobne som sklamaná, že nerobíme väčší pokrok. Máme tento argument už 5 rokov.

Päť rokov sem a tam o tom, ako presne bude pomenovanie a štruktúra. Použijeme grid? Použijeme úplne novú vlastnosť? Vytvoríme samostatné vlastnosti len pre masonry? Nemohli sme sa na tom skutočne rozhodnúť.

Jedna vec, ktorú sa mi páči podporiť, je komentár od nášho vlastného Juana Diega, ktorý hovorí o tom, ako riešenia nie sú "len použite grid" alebo vytvorte novú vlastnosť, ale že by sme sa mohli zbaviť grid- predpony úplne a uspokojiť sa s možnosťou, ktorá vyhovuje pre grid aj masonry:

...malo by byť možné použiť novú neprefixovanú template-areas vlastnosť pre masonry a grid, bez ohľadu na formátovací kontext..

Našťastie, niečo dobré vyšlo z toho vlákna, pretože ďalšie stretnutie sa konalo 31. januára 2025 a hádajte čo? Rozhodlo sa znovu použiť vlastnosti grid šablónovania a umiestnenia pre masonry rozloženie.

CSS Working Group práve diskutovala [css-grid-3][masonry] Masonry Syntax Debate, a dohodla sa na nasledovnom: VYRIEŠENÉ: Znovu použiť vlastnosti grid šablónovania a umiestnenia pre masonry rozloženie.

Počkaj. Prečo oznamujem o vlastnostiach masonry syntaxe? Čo hlavná syntax samotná? Nie je to dôvod, prečo sme tu? Skvelé, ste stále so mnou. Tak vám ukážem presné vlákno, kde sa skončila vojna o masonry syntax.

Je to tu (takmer)!

To nás privádza k najnovšiemu oznámeniu, že nastavenie grid-lanes na vlastnosť display aktivuje masonry rozloženie.

.masonry { display: grid-lanes;
}

Bolo ťažké sa sem dostať. Rozhodovanie len o kľúčovom slove trvalo roky. Len pozrite sa na všetky názvy, ktoré boli zvažované pred grid-lanes:

• collapsed-grid alebo grid collapse
• grid-stack alebo stacked-grid
• grid-pack alebo packed-grid alebo grid pack
• compact-grid alebo compact grid
• grid-masonry alebo masonry-grid
• grid-flex alebo flex-grid
• grid single-axis (masonry grid) vs. grid dual-axis (normálny grid)
• grid stack (masonry grid) vs. grid grid (normálny grid)
• staggered-grid alebo grid staggered
• uneven-grid
• semi-grid
• lane-grid alebo grid-lanes
• axial-grid

Nevadilo by mi staggered-grid keďže to je to, čo to je v React Native. V skutočnosti, Kevin Powell súhlasil. To povedané, som úplne v poriadku s grid-lanes. Chvíľu potrvá, kým to prehliadače implementujú, pretože diskusie ohľadom úprav skratiek pre masonry stále prebiehajú, zatiaľ bez veľkého pokroku v tejto oblasti.

Čo Item Flow?

Ó áno, pamätáte si to? Stále sa pracuje na tom, a očakávam, že to uvidíme po správnej implementácii grid-lanes, ktorá začne kolovať. Je tu pekný hypotetický príklad od Fantasai, ktorý ilustruje, ako by to mohlo vyzerať, ak by sa to dnes pridalo do špecifikácie:

item-flow: <item-direction> || <item-wrap> || <item-pack> || <item-slack> /* skratka pre */
item-direction: row | column | row-reverse | column-reverse
item-wrap: wrap | wrap-reverse
item-pack: normal | dense || collapse
item-slack: <length-percentage>

Pri použití by to vyzeralo nejako takto:

.masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); item-flow: collapse; /* == item-flow: row collapse 1em; */ gap: 1rem;
}

Čo je teda ďalej?

Po mnohých vzájomných diskusiách je masonry grid-lanes tu! Ale kde presne?

No, toto je tá nepríjemná časť. Pravda je, že budeme musieť ešte počkať, kým prehliadače implementujú grid-lanes. Ako dlho to môže trvať? Naozaj nemôžem povedať, ale zvážte, že všetky hlavné prehliadače už implementovali nejaký typ masonry rozloženia za príznakmi alebo náhľadmi, ale s rôznymi syntaxami:

• Tímy Chrome a Edge pôvodne implementovali Masonry v Chromium 140 ako display: masonry, ale už pracujú na prechode na grid-lanes. Niektoré z ich dém to už odrážajú.
• Tím WebKit implementoval masonry v Safari 17 ako display: grid, ale už zdá sa, že majú nejakú prácu na grid-lanes v príprave.
• Tím Mozilla bol vlastne prvý prehliadač, ktorý implementoval masonry rozloženie v roku 2020 — používajúc display: grid tiež. Ale ako ostatní, už sú v procese prechodu na grid-lanes.

Takže, dobré správy zo všetkých strán! Všetko, čo zostáva, je čakať. Ak chcete sledovať pokrok grid-lanes, tu je dobrý súbor odkazov pre každý prehliadač od Patricka Brosseta. A ak nemôžete čakať na oficiálnu implementáciu masonry, Zell Liew má prístup na jeho použitie dnes, s minimálnym JavaScriptom.