Subgrid umožní vytvořit zanořenou mřížku, která zároveň podědí layout rodičovského gridu. Je to velmi praktické, ale zatím podporované jen ve Firefoxu a Safari. Subgrid je součástí specifikace CSS gridu. Grid je skvělý, ale dříve či později se s ním dostaneme do situace, kdy potřebujeme jeden grid zanořit do druhého. V takové situaci si pak pochopitelně přejeme, aby vnitřní grid dokázal podědit vnější layout. Jak vidíte na obrázku níže, subgrid mám to pomůže zařídit. Vnitřní části položek budou lícovat, i když mají různě velký obsah. Grid a subgrid. Táta a syn. Můžeme to samozřejmě zajistit i bez subgridu: Nastavit prvkům fixní rozměry na výšku nebo použít JavaScript (což bych kvůli výkonu moc nedoporučoval). Staré páky mezi kodéry si vzpomenou na složité tabulkové layouty, kterými se toho (skoro) dalo dosáhnout, ale ve kterých se nikdo nevyznal… Příklad s kartou produktu Víte vy co? Ukážu vám to na jednoduchém příkladu. Na obrázku výše totiž vidíte layout podobný tomu, který používám na Vzhůru dolů. Mám seznam položek, říkejme jim karty produktu. Každá karta má složitější strukturu, ve které najdete nadpis, obrázek, text a tlačítko: <div class="container"> <div class="item"> <h2 class="item-heading"> <a href="#">Nadpis…</a> </h2> <div class="item-image"> <a href="#"> <img src="image.jpg" alt="Obrázek" width="300" height="200"> </a> </div> <div class="item-perex"> Text… </div> <div> <button>Tlačítko…</button> </div> </div> <div class="item"> <!-- Další karta produktu --> </div> </div> Vnější rozvržení, tedy to, které se týká vodorovného umístění karet, udělám gridem. To žádný problém nebude: .container { display: grid; grid-template-columns: repeat(2, minmax(250px, 400px))); gap: 4rem; } Umísťuji zde dvě položky (repeat(2,…)). Přeji si, aby nebyly užší než 250px a širší než 400px. Mezera mezi položkami je 4rem. To bude asi bez problémů, že? Ale když já chci, aby nadpisy, obrázky, texty i tlačítka jednotlivých karet byly vždy ve stejné výšce. Přidáváme layout pro jednotlivé karty Nejprve musíme změnit rodičovský layout. Uděláme to tak, že přidáme řádky pomocí vlastnosti grid-template-rows. .container { grid-template-rows: repeat(4, auto); } Jak vidíte, nemáme příliš velké ambice položky layoutu nějak omezovat. Víme jen, že budou čtyři (nadpis, obrázek, text, tlačítko). A hodláme je pouze zarovnávat mezi sebou navzájem. A teď kouzlo, subgrid Zápis pro vnitřní mřížku u jednotlivých položek, který řešíme podmřížkou (subgridem), bude: .item { display: grid; grid-row: span 4; grid-template-rows: subgrid; } Prohlížeči dáváme tyhle instrukce: Budiž grid (display:grid)! Umísti tuto položku do čtyř buněk gridu (grid-row:span 4). Svislý směr mřížky nechť je subgridem, takže po gridu zdědí vnější mřížku (grid-template-rows:subgrid). Je to jasné? Výsledek uvidíte na obrázku, který vám snad pomůže s pochopením celé věci, což je opět možné zkoušet na živé ukázce. Zelená podmřížka (vlevo) si hoví v modré mřížce a je spokojená. My také, protože vnitřní položky karet jsou navzájem zarovnané. Živá ukázka vám řekne více. Poznámky k subgridu Vzhledem k tomu, že v době aktualizace textu (říjen 2022) subgrid umí jen dva menší prohlížeče, Firefox a Safari, nepůjdu u této části CSS gridu úplně do hloubky. Pár poznámek zde ale uvedu: Vícerozměrnost sugridu V ukázce jsme pro podmřížku využili jen svislý směr rodičovského layoutu. Je ale samozřejmě možné využít i vodorovný nebo prostě oba směry najednou. Pak se z toho stává jeden velký (ale krásný) tabulkový layout, jako z roku 2002. Dělám si legraci, je to samozřejmě daleko, daleko lepší než layout v <table>. Dědění mezer Vlastnost gap se z rodičovského gridu samozřejmě dědí i na ten vnitřní. Je ale možné si mezery ve vnitřním layoutu změnit novou deklarací gap. Žádné přidávání implicitních řádků nebo sloupců V běžném gridu je možné pomocí vlastností grid-auto- definovat rozvržení pro řádky či sloupce. Ty se automaticky přidají, když se rozšíří obsah v HTML. Je asi pochopitelné, že toto v subgridu možné není. Vždy se jen umísťuje do mřížky, která je zděděná shora od rodičovského gridu. Podpora v prohlížečích Subgrid je součástí specifikace CSS Grid Layout Module již od Level 2, která se datuje do roku 2018. Zde je stav k únoru 2022: Firefox podporuje subgrid od verze 70 z prosince 2019. Safari subgrid přidalo v září 2022 do verze 16, od iOS 16 a v aktualizaci pro macOS Monterey a Big Sur. V Chromu se na subgridu – zdá se – docela hodně pracuje. Subgrid má tedy opravdu dobrou šanci, že se ujme a bude nám dobře sloužit už v blízké budoucnosti. Aktuální informace od podpoře hledejte na CanIUse.com/css-subgrid Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
Nápojový lístek Točene nápoje Pilsner Urguell 0,5 65 Kč Gambrinus 10 0,5 49 Kč Frisco (jablečný cider) 0,3 49 Kč Birell ( pomelo & grep) 0,5 60 Kč #gallery-1227484041 .grid-col-1{height: 600px} #gallery-1227484041 .grid-co
projít na článek41. ročník tradiční motoristické ankety Zlatý volant s sebou přinese oproti předchozím ročníkům řadu zajímavých změn. Jednou z nich bude vstupní hala stylizovaná do závodního depa včetně gridu, tedy startovního roštu, naplněného závodními auty a krásnými
projít na článekPořád se něco učíme. Abych se naučil layouty v CSS, napsal jsem o nich knížku. Opravdu. Nemyslete si, že jsem si prostě jen sedl k počítači a začal sepisovat to, co jsem měl v hlavě. O gridu a flexboxu jsem toho před třemi lety nevěděl zase o tolik více n
projít na článekVyhřívané stolky jako venkovní topení v Après-Ski bar u Svatého Vavřince Výhodou našich elektricky vyhřívaných stolků Galavito Heating Table je široká variabilita a velká přizpůsobivost. Naše stolové nohy s infrazářičem lze totiž nainstalovat pod jakoukol
projít na článekThermacut® plazmové zdroje EX-TRAFIRE® mají celou řadu předností a jsme na ně jaksepatří hrdí. V následujících odstavcích Vás stručně seznámíme s několika hlavními výhodami oproti konkurenčním výrobcům. INTEGROVANÝ GRID MÓD Všechny naše zdroje mají integr
projít na článek