Vlastnost gap v CSS je zkratkou pro row-gapa column-gapspecifikující velikost okapů, což je prostor mezi řádky a sloupci v rámci rozložení mřížky, flexu a více sloupců.
/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )
Pomocí posuvníku v ukázce níže zobrazíte gapvlastnost v akci:
Syntax
gap přijímá jednu nebo dvě hodnoty:
- Jedna hodnota nastaví obě
row-gapacolumn-gapstejnou hodnotu. - Pokud jsou použity dvě hodnoty, první nastaví
row-gapa druhá nastavícolumn-gap.
.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )Specifikace modulu CSS Grid Layout Module definovala prostor mezi stopami mřížky pomocí grid-gapvlastnosti. gapje určen k jeho nahrazení, aby bylo možné definovat mezery ve více metodách rozvržení CSS, jako je flexbox, ale grid-gapstále je třeba je použít v případech, kdy prohlížeč možná implementoval, grid-gapale ještě musí začít podporovat novější gapvlastnost.
Hodnoty
gap přijímá následující hodnoty:
normal: (Výchozí) Prohlížeč určí použitou hodnotu 1em pro rozložení s více sloupci a 0px pro všechny ostatní kontexty rozložení (tj. Mřížku a flex).: Libovolný platný a nezáporné délka CSS, jako je napříkladpx,em,rema%, mezi jinými.: Velikost mezery jako nezáporná procentní hodnota vzhledem k dimenzi prvku. (Podrobnosti viz níže.)initial: Použije výchozí nastavení vlastnosti, což jenormal.inherit: Přijme hodnotu mezery rodiče.unset: Odstraní proudgapz prvku.
Procenta ve vlastnostech mezery
Když je velikost kontejneru v dimenzi mezery definitivní, gapvyřeší procenta oproti velikosti pole obsahu kontejneru v jakémkoli typu rozložení.
Jinými slovy, když prohlížeč zná velikost kontejneru, může vypočítat procentuální hodnotu gap. Například když je výška kontejneru 100 pixelů a gapje nastavena na 10%, prohlížeč ví, že 10% ze 100 pixelů je 10 pixelů.
Ale když prohlížeč nezná velikost, bude se divit: „10% z čeho?“ V těchto případech se gapchová odlišně na základě typu rozložení.
V rozložení mřížky se procenta vyřeší proti nule pro určení příspěvků vnitřní velikosti, ale vyřeší se proti poli obsahu prvku při rozložení obsahu pole, což znamená, že vloží prostor mezi položky, ale prostor neovlivní velikost kontejneru.
V této ukázce není výška kontejneru určitá. Podívejte se, co se stane, když zvětšíte gapvelikost. Poté nastavte jednotky gapv pixelech a zkuste to znovu:
Ve flexibilním rozložení se procenta ve všech případech vyřeší proti nule, což znamená, že mezery se nepoužijí, když prohlížeč nezná velikost kontejneru:
Použití funkce calc () s mezerou
Pomocí calc()funkce můžete určit velikost, gapale v době psaní tohoto článku pro něj není v Safari a iOS k dispozici žádná podpora .
.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); )
.grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )Příklady
Tato gapvlastnost je navržena pro použití v rozložení mřížky, flexu a více sloupců. Podívejme se na několik příkladů.
Rozvržení mřížky
V následující ukázce můžete vidět, gapže se používá k určení vlastností row-gapa column-gapna mřížkovém kontejneru a definování okapů mezi řádky mřížky a sloupy mřížky:
Flex rozložení
Aplikování mezery na hlavní osu flex kontejneru označuje mezery mezi flex položkami v jednom řádku rozložení flexu.
Zde se column-gappoužívá ve směru řady:
Zde se row-gappoužívá ve směru sloupce:
Aplikování gapna příčnou osu flex kontejneru označuje rozestup mezi ohybovými linkami rozložení flexu.
Tady je row-gapv řadě:
Tady column-gapve směru sloupce:
Rozložení více sloupců
column-gapse objeví ve vícesloupcových rozloženích, aby se vytvořily mezery mezi rámečky sloupců, ale všimněte si, že to row-gapnemá žádný účinek, protože pracujeme pouze ve sloupcích. gapv tomto kontextu lze stále použít, ale column-gappoužije se pouze.
Jak můžete vidět v dalším ukázce, i když má gapvlastnost hodnotu 2rem, je to pouze oddělování položek vodorovně namísto obou směrů, protože pracujeme ve sloupcích:
Čím víc víš…
O práci s gapnemovitostmi stojí za zmínku několik věcí .
Je to příjemný způsob, jak zabránit nežádoucímu rozteči
Už jste někdy použili okraje k vytvoření mezer mezi prvky? Pokud si nebudeme dávat pozor, můžeme skončit s extra mezerami před a za skupinou položek.
Řešení, které obvykle vyžaduje přidání negativních okrajů nebo uchýlení se k pseudo-selektorům k odstranění okrajů z konkrétních položek. Pěkná věc na použití gapv modernějších metodách rozvržení je, že mezi položkami máte pouze prostor. Extra cruft na začátku a na konci nikdy není problém!
Ale hej, pokud chcete mít během používání prostor kolem položek gap, položte paddingkontejner takto:
.container ( display: flex; gap: 1rem; padding: 1rem; )Velikost žlabu se ne vždy rovná hodnotě mezery
The gap property is not the only thing that can put space between items. Margins, paddings, justify-content and align-content can also increase the size of the gutter and affect the actual gap value.
In the following example, we’re setting a 1em gap but, as you can see, there is much more space between the items, caused by the use of distributed alignments, like justify-content and align-content:
Browser support
Feature queries are usually a nice way to check if a browser supports a specific property, but in this case, if you check for the gap property in flexbox, you may get a false positive because a feature query won’t distinguish between layout modes. In other words, it might be supported in a flex layout which results in a positive result, but it is actually not supported if it’s used in a grid layout.
Grid layout
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| No | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| 12+ | No | 81+ | 84+ | 68+ |
Grid layout with calc() values
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| No | 84+ | 79+ | 84+ | No | 69+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| No | No | 81+ | 84+ | 68+ |
Grid layout with percentage value
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| No | 84+ | 79+ | 84+ | No | 69+ |
| iOS Safari | Opera Mobile | Android Browser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| No | No | 81+ | 84+ | 68+ |
Flex layout
The specification for using gap with flexbox is currently in Working Draft status.
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 84 | 63 | Ne | 84 | TP |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Ne | Ne |
Rozložení více sloupců
| TJ | Okraj | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 84+ | 79+ | 84+ | Ne | 69+ |
| iOS Safari | Opera Mobile | Prohlížeč Android | Chrome pro Android | Firefox pro Android |
|---|---|---|---|---|
| Ne | Ne | 81+ | 84+ | 68+ |
Více informací
- CSS Box Alignment Module Level 3
- Chrom přistane s mezerou Flexbox (lístek # 761904)
- Stav funkce WebKit CSS
Příbuzný
- Rozvržení mřížky
- Rozvržení Flexboxu
- Vícesloupcové rozložení