V březnu Mozilla vydala Firefox 52, který přidal podporu rozvržení CSS Grid. Pokud CSS Grid neznáte, jedná se o dvourozměrný systém rozvržení pro web, který nám umožňuje vytvářet vzory rozvržení nativně v prohlížeči. To znamená, že můžeme snadno obnovit známé mřížky pomocí pouhých několika řádků CSS. Znamená to také, že s CSS a rozvržením můžeme dělat spoustu věcí, které dříve nebyly možné… ale o tom až za chvíli.
Krátká poznámka: Tento příspěvek si neklade za cíl být vyčerpávajícím učebním materiálem pro CSS Grid a předpokládá základní znalost CSS Grid. Pokud jste tak ještě neučinili, doporučuji podívat se na fantastickou stránku o rozvržení CSS Grid na MDN.
Rozvržení na webu bylo vždycky složité. Když byl web poprvé představen, neexistovala žádná metoda pro rozvržení. Pak přišly tabulky (v tabulkách, v tabulkách, v tabulkách). Bylo to hackerské a podivné, ale fungovalo to. Když bylo koncem 90. let zavedeno CSS, mohli vývojáři začít používat divy a floaty pro své návrhy a rozvržení. To nakonec vedlo ke vzniku rámců a mřížkových systémů, které pomohly dát smysl všem „gotchas“, jako je vymazání floatů, záporné okraje, responzivní design a další. A tak se věci vyvíjejí již několik let. Existují tisíce mřížkových systémů, ale všechny jsou víceméně stejné.
Teď, když je CSS Grid Layout realitou, jsem se chtěl podívat, čím by bylo možné nahradit stávající mřížkový rámec pomocí CSS Grid. Pro tento experiment jsem si vybral populární framework Bootstrap.
Začal jsem vytvořením základního webu s použitím mřížky Bootstrap:
Podívejte se na něj na CodePenu.
Převedeme jej tedy na použití mřížky CSS Grid.
V Bootstrapu vše obaluje třída .container a nastavuje omezení šířky. Přidá také padding k levému a pravému okraji a vše vycentruje. Není zde mnoho věcí, které by bylo třeba měnit. Stejně jako v případě Bootstrapu se třída kontejner může hodit pro použití s mřížkou CSS Grid. Znovu jsem ji vytvořil takto:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}Můžeme také přidat responzivní body zlomu přidáním následujícího:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap používá třídu .row k obtékání sloupců a poskytuje záporný okraj vlevo a vpravo, aby negoval padding přidaný jednotlivými sloupci. Hacky, jako jsou záporné okraje, již nejsou v CSS Grid potřeba, ale pokud jste četli dokumentaci, víte, že CSS Grid vyžaduje kontejner mřížky. Třída .row je ideálním místem pro jeho vytvoření. Ukážu vám, co jsem udělal, a pak si to rozebereme.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid vytvoří kontejner mřížky.
Vlastnost grid-template-columns definuje sloupce mřížky. Můžete použít mezery a definovat každý sloupec zvlášť, ale zde využijeme zápis repeat a definujeme 12 stejně velkých sloupců. 1fr Odkazuje na šířku jednotlivých sloupců. MDN definuje jednotku fr jako novou jednotku, která „představuje zlomek dostupného prostoru v kontejneru mřížky“. Více informací o jednotkách fr si můžete přečíst na webu MDN. Můžete si také přečíst více o vlastnosti grid-template-columns.
Nakonec vlastnost grid-gap je zkrácená vlastnost, která definuje jak velikost prostoru mezi sloupci, tak mezi řádky sloupců. Představte si ji jako náš žlábek. Více o grid-gap si můžete přečíst zde.
Nyní už zbývají jen třídy sloupců. Bootstrap používá třídy sloupců, například .col-md-6 nebo .col-lg-8, k určení počtu sloupců, které má div překlenout. Také div floatuje a přidává výplň vlevo a vpravo, aby vytvořil žlábky mezi sloupci. Obnovení těchto tříd je neuvěřitelně snadné díky zkrácené vlastnosti .grid-column. Pokud bychom například chtěli znovu vytvořit třídu .col-md-6, můžeme použít následující:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Jednoduché, že? Žádné plovoucí hodnoty. Žádné výplně. Prostě to funguje. Zkratka grid-column určuje velikost a umístění prvku. Pomocí span můžeme označit, že tento konkrétní prvek má pokrývat šest sloupců. O žlábek je automaticky postaráno díky vlastnosti grid-gap obalu. Více informací o vlastnosti grid-column se dozvíte zde.
Co se tedy stane, když to všechno spojíte dohromady? No, web vypadá úplně stejně, ale jsme schopni zcela odstranit závislost na Bootstrapu a použít nativní mřížky CSS.
Podívejte se na aktualizovaný web na CodePenu.
Tento typ experimentů je zábavné cvičení, ale může být také nebezpečné. Vypůjčím si větu od moudrého filozofa Jeffa Goldbluma:
„Ty … jsi byl tak zaujatý tím, jestli můžeš, nebo nemůžeš, že ses nezastavil, abys přemýšlel, jestli bys měl.“
Nechceme CSS Grid omezovat tím, že ho budeme tlačit do syntaxe, která omezí jeho potenciál. Dokázali jsme snadno obnovit mřížku Bootstrap, ale CSS Grid je mnohem výkonnější než jakýkoli mřížkový systém, který přišel před ním. Je to proto, že se jedná o webově nativní řešení vytvořené od základu.
Už nejsme vázáni na 12sloupcové mřížky, které plují zleva doprava. Chcete umístit prvky na přesná místa v mřížce nezávisle na jejich pořadí ve zdrojovém kódu HTML? Jděte do toho. Chcete vytvářet prvky, které pokrývají více sloupců a řádků? To není problém. Podívejte se na tuto ukázku, kterou vytvořil Craig Cook ze společnosti Mozilla a která představuje různé vzory rozvržení. Zkuste některé z těchto rozvržení znovu vytvořit pomocí Bootstrapu (nápověda: není to možné). Teprve jsme se dotkli povrchu toho, co mřížky CSS dokážou.