CSS vlastnost gap: mezera pro flexbox a grid

Vzhůru dolů 24.11.2021 01:46 Pomocí CSS vlastnosti gap můžeme definovat mezery v rozvrženích vytvářených pomocí CSS layoutů. Téhle mezeře se občas i v češtině podle anglického originálu říká „gutter“. A brzy taky možná „gap“. gap je mezera mezi vnitřními prvky layoutu. Vlastnost gap je možné použít ve všech moderních layoutech – v gridu, flexboxu i multicol. Patří však do specifikace CSS Box Alignment. Od příchodu Safari verze 14.1 je možné gap ve všech prohlížečích používat nejen v rámci gridu, ale také ve flexboxu. To je skvělé a taky proto se vyplatí tuto vlastnost umět použít. Zápis gap je zkratkou pro jiné dvě vlastnosti: row-gap – prostor mezi řádky column-gap – prostor mezi sloupci Zkratka se zapisuje takto: gap: ; Nastavujeme zde, jak je v CSS zvykem, nejprve svislý a pak až vodorovný směr. Druhá hodnota je volitelná. Pokud se neuvede, použije se jedna hodnota pro oba směry. I to je ostatně ve stylech běžné. Příklad Vezměme ukázku se čtyřmi položkami v layoutu: 1 2 3 4 Layout v CSS definujeme následovně: .container Vysvětleme si to: Deklarace display:grid zajistí zobrazení pomocí CSS gridu. Vlastnost grid-template-columns definují podobu mřížky. Zde jde sloupce o rovnoměrné šířce. gap: 2em 1em je instrukce pro vložení mezery svisle a pak i vodorovně. Totéž bychom samozřejmě mohli zapsat v nezkrácených deklaracích následovně: .container Raději gap než margin či padding Vlastnost gap je pro definování mezer v layoutu daleko efektivnější než padding nebo margin. Nijak se totiž nepočítá do šířky ani výšky položky layoutu a také se vždy vykresluje jen mezi položkami samotnými. Je také pěkné si nastavit mezery mezi prvky v layoutu pro celý kontejner na jednom místě. Z toho důvodu právě vlastnost gap vznikla. Je však samozřejmě možné a bezpečné zároveň nastavovat mezery pomocí vnějších i vnitřních okrajů prvku nebo případně gap s dvojkou margin/padding kombinovat. Toho se určitě nebojte. Jen si pak dejte pozor na interpretaci v prohlížečích, protože viditelná mezera vám naroste: .container .column Anketní otázka: Jak velká bude mezera mezi položkou 1 a 2? Zvládnete ji zodpovědět ještě než se podíváte na obrázek? Nechám vám chvilku času. Ještě chvilku. A teď už přichází obrázek: Ano, viditelná mezera mezi položkami bude široká celé 3em. Sečteme dva vnější okraje a mezeru . Možné hodnoty Následuje přehled možných hodnot vlastnosti gap. Čistě pro inspiraci, naložte s tím dle svého. Různé hodnoty pro svislý i vodorovný směr .container Jak už jsem uvedl, toto je možné. V prvním čísle je svislý směr, v druhém vodorovný. Pojďme si to vyzkoušet na flexboxovém layoutu, který jsme ještě vlastností gap nestihli nepotrápit: .container .column Raději si to zopakujme. Zápis gap:5px 1rem říká, že svisle mezi řádku chci mezeru 5px a vodorovně mezi sloupci pak 1rem. Použití funkce calc Uvádění výpočetní funkce calc se v hodnotách gap může hodit: .container Dříve toto nefungovalo v Safari, ale nyní je to už zprovozněné. Do slunné Kalifornie posíláme klíčenku s poděkováním! Pokud firmě Apple nevěříte, zkuste si to na CodePenu. A k čemu, že se funkce calc může hodit? Příkladem budiž odpočítání šířky rámečků buňek layoutu z celkové šířky mezery. Klíčové slovo normal Šup s tím hned do vody, tedy do ukázky kódu: .container Slovo normal představuje použitou hodnotu 1em u vícesloupcového layoutu a hodnotu 0px v kontextu gridu a flexboxu. Asi to není zase tak moc zajímavé… Já jen… Když byste se náhodou ptali… nebo vám to někdo položil jako otázku v testu. Procenta a jejich uvádění ve svislém směru Procentuální hodnoty můžete chtít použít, ale dejte si pozor na hodnoty ve svislém směru. .container Ve vodorovném směru je to jednoduché – spočítá se deset procent ze šířky rodičovského kontejneru a tato hodnota se vloží jako mezera mezi prvky. Zajímavější je svislý směr. V layoutu tvořeném mřížkou se spočítá deset procent z výchozí výšky rodičovského kontejneru. Prostě z výšky před aplikováním mezery pomocí vlastnosti gap. Pravděpodobně se vám tedy stane, že mezera vytlačí spodní prvky z kontejneru. V případě flexboxového layoutu a neznámé výšky kontejneru se procentuální gap ve svislém směru vůbec nezapočítá. Je z něj čistá nula. Ptáte se, kdy je výška kontejneru neznámá? Inu, ve flexboxu skoro vždy – dokud ji výslovně nedefinujete. Zkoušení naživo je možné opět v následující ukázce. Co byste o gap měli vědět? Když už jsme v tom, mám pár poznámek. Doslova pár: Mezery tvořené gap mají vliv na minimální rozestupy mezi položkami. Je však možné další rozestupy přidat pomocí vlastností jako justify-content nebo align-content. Jejich hodnota space-between má podobnou funkcionalitu jako gap a je možné je vzájemně kombinovat. Když už se gap dá použít všude, nedá se to použít i pro mezery mezi buňkami uvnitř ? Nedá, děkujeme za optání. Tabulková zobrazení místo používají vlastnost border-spacing. Podpora v prohlížečích Pokud jde o moderní prohlížeče, vlastnost gap ve flexboxu a gridu podporují všechny. Grid: Prakticky plná podpora. Internet Explorer 11 vlastnost gap nepodporuje, ale to je možné dohnat použitím nástroje Autoprefixer. Flexbox: Nepodporuje IE 11. Vícesloupcový layout: Nepodporuje IE 11 a zatím ani Safari. Takže pokud potřebujete mezery v gridu a flexboxu a neřešíte Explorer, jste takzvaně ve vatě. Dříve jen v gridu Dřívější zápisy „děrovacích“ vlastností byly ve specifikaci definovány jinak, s prefixem grid-: grid-row-gap, grid-column-gap a grid-gap a zaměřené čistě jen na CSS grid. Nyní jsou ale z této části specifikace vyjmuté a vyvíjené pod samostatným modulem CSS Box Alignment. Logicky totiž nespadají jen do možnosti definovat layout v mřížce, ale také ve flexboxu nebo vícesloupcovém layoutu. Vlastnost gap, tedy bez prefixu grid- je podporována v Chrome 68+, Safari 11.2 Release 50+ a Opeře 54+. Ale to už je dneska vlastně jen historické okénko. Detailní informace o podpoře jsou na CanIUse. caniuse.com/gap Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .