Martin Michálek Martin Michálek  – 14. 9. 2021

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 podle anglického originálu říká „gutter“.

CSS vlastnost gap

gap je mezera mezi vnitřními prvky layoutu.

Vlastnost gap je možné použít ve všech layoutech – v  CSS gridu, flexboxu, multicol. Patří však do specifikace CSS Box Alignment.

Od Safari verze 14.1 je navíc možné gap používat nejen v gridu, ale také ve flexboxu, což je skvělé a proto se vyplatí tuto vlastnost umět použít.

Zápis gap je zkratkou pro jiné dvě vlastnosti:

  • row-gap – prostor mezi řádky (v „blokovém“ či svislém směru)
  • column-gap – prostor mezi sloupci (tedy v „inline“, tedy obvykle vodorovném směru)

Zkratka se zapisuje takto:

gap: <hodnota row-gap> <hodnota column-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:

<div class="container">
  <p class="column">1</p>
  <p class="column">2</p>
  <p class="column">3</p>
  <p class="column">4</p>
</div>

Layout v CSS definujeme následovně:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em 1em;
}

Vysvětleme si to:

CSS Gap

Totéž bychom samozřejmě mohli zapsat v nezkrácených deklaracích následovně:

.container {
  row-gap: 2em;
  column-gap: 2em;
}

Raději gap než margin či padding (ale nic proti nim!)

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 globálně, z toho důvodu právě vlastnost gap vznikla.

Je však samozřejmě možné a bezpečné zároveň nastavovat „gutter“ a také vnější i vnitřní okraje prvku. Toho se určitě nebojte.

Jen si pak dejte pozor na interpretaci v prohlížečích, protože viditelná mezera vám naroste:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

.column {
  padding: 1em;
  margin: 1em;
}

CSS Gap v kombinaci s marginem a paddingem

Možné hodnoty

Následuje přehled možných hodnot vlastnosti. Čistě pro inspiraci, naložte s tím dle svého.

Různé hodnoty pro svislý i vodorovný směr

.container {
  gap: 5px 1rem;
}  

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 nepotrápili:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 1rem;
}

.column {
  width: 10em;
}

CSS Gap ve flexboxu

Použití funkce calc()

Uvádění výpočetní funkce calc() v hodnotách gap se může hodit:

.container {
  gap: calc(1rem - 2px);
}

Dříve toto nefungovalo v Safari, ale nyní je to už zprovozněné. Do Kalifornie posíláme klíčenku s poděkováním!

Klíčové slovo normal

.container {
  gap: normal;
}

Slovo normal představuje použitou hodnotu 1em u vícesloupcového layoutu a  hodnotu 0px ve kontextu gridu a flexboxu. Asi to tedy není příliš zajímavé. Já jen – když byste se náhodou ptali…

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 {
  gap: 10%;
}

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.

CSS Gap - procenta ve svislém směru v gridu

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.

CSS Gap - procenta ve svislém směru ve flexboxu

Co byste o gap měli vědět?

Když už jsme v tom, mám pár poznámek. Doslova pár:

  1. 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.
  2. Když už se gap dá použít všude, nedá se to použít u pro mezery mezi buňkami uvnitř <table>? 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.

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-gapgrid-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. V posledním z nich ale zatím chybí důležitá podpora Safari.

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

Komentáře

Váš názor? Vaše zkušenosti? Našli jste chybu?