Gapegenskapen i CSS är en förkortning för row-gapoch column-gapspecificerar storleken på rännorna, vilket är utrymmet mellan rader och kolumner i rutnät, flex och flerkolonnlayouter.
/* 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; )
Använd skjutreglaget i demo nedan för att se gapfastigheten i aktion:
Syntax
gap accepterar ett eller två värden:
- Ett enda värde ställer in både
row-gapochcolumn-gapmed samma värde. - När två värden används sätter den första den
row-gapoch den andra sätter dencolumn-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%; */ )Specifikationen för CSS Grid Layout Module definierade utrymmet mellan rutspår med hjälp av grid-gapegenskapen. gapär avsedd att ersätta den så att luckor kan definieras i flera CSS-layoutmetoder, som flexbox, men grid-gapbehöver fortfarande användas i fall där en webbläsare kan ha implementerat grid-gapmen ännu inte har börjat stödja den nyare gapegenskapen.
Värden
gap accepterar följande värden:
normal: (Standard) Webbläsaren anger ett använt värde på 1 em för layout med flera kolumner och 0 pixlar för alla andra layoutkontexter (dvs. rutnät och flex).: Ett giltigt och icke-negativt CSS längd, såsompx,em,remoch%, bland annat.: Storleken på klyftan som ett icke-negativt procentvärde relativt elementets dimension. (Se nedan för mer information.)initial: Tillämpar egenskapens standardinställning, vilket ärnormal.inherit: Antar förälders gapvärde.unset: Tar bort strömmengapfrån elementet.
Procentandelar i gapegenskaper
När storleken på en container i spaltdimensionen är bestämd, gaplöses procentsatser mot storleken på behållarens innehållsruta i alla layouttyper.
Med andra ord, när webbläsaren känner till behållarens storlek kan den beräkna procentsatsen för gap. Till exempel, när behållarens höjd är 100 pixlar och den gapär inställd på 10%, vet webbläsaren att 10% av 100 pixlar är 10 pixlar.
Men när webbläsaren inte vet storleken kommer den att undra "10% av vad?" I dessa fall gapbeter sig olika beroende på layouttyp.
I en rutnätlayout löses procentsatserna mot noll för bestämning av inneboende storleksbidrag, men löses mot elementets innehållsruta när du lägger ut rutans innehåll, vilket innebär att det kommer att placera utrymme mellan objekt men utrymmet påverkar inte behållarens storlek.
I denna demo är behållarens höjd inte bestämd. Se vad som händer när du ökar gapstorleken. Ställ sedan in gappixel-enheterna och försök igen:
I en flexlayout löses procentsatserna mot noll i alla fall, vilket innebär att luckor inte kommer att gälla när behållarens storlek inte är känd för webbläsaren:
Använda calc () -funktionen med gap
Du kan använda calc()funktionen för att ange storleken på gapmen vid skrivandet finns det inget stöd för det på Safari och iOS.
.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); )Exempel
Den gapegenskapen är avsedd för användning i grid, flex och multi-kolumn layouter. Låt oss kolla in några exempel.
Rutnätslayout
I följande demo kan du se gapatt det används för att specificera row-gapoch column-gapegenskaper i en rutnätbehållare, definiera rännorna mellan nätrader respektive rutnätkolumner:
Flex layout
Att applicera mellanrum på huvudaxeln för en flexcontainer indikerar avståndet mellan flexartiklar i en enda rad i flexlayouten.
Här column-gapanvänds i radriktning:
Här row-gapanvänds i en kolumnriktning:
Att applicera gappå tväraxeln för en flexcontainer indikerar avståndet mellan flexlinjerna i flexlayouten.
Här är row-gapi radriktning:
Här är column-gapi en kolumnriktning:
Layout med flera kolumner
column-gapvisas i layouter med flera kolumner för att skapa luckor mellan kolumnrutorna, men notera att det inte row-gaphar någon effekt eftersom vi bara arbetar i kolumner. gapkan fortfarande användas i detta sammanhang, men endast den column-gapkommer att tillämpas.
Som du kan se i nästa demo, även om gapegenskapen har värdet 2rem, skiljer det bara objekt horisontellt istället för båda riktningarna eftersom vi arbetar i kolumner:
Ju mer du vet…
Det finns ett par saker som är värda att notera om att arbeta med gapfastigheten.
Det är ett trevligt sätt att förhindra oönskat avstånd
Har du någonsin använt marginaler för att skapa avstånd mellan elementen? Om vi inte är försiktiga kan vi sluta med extra avstånd före och efter föremålsgruppen.
Lösning som vanligtvis kräver att du lägger till negativa marginaler eller använder pseudoväljare för att ta bort marginal från specifika objekt. Men det fina med att använda gapi modernare layoutmetoder är att du bara har utrymme mellan objekt. Den extra cruft i början och slutet är aldrig ett problem!
Men hej, om du vill ha utrymme runt föremålen medan du använder gap, sätt paddingrunt behållaren så här:
.container ( display: flex; gap: 1rem; padding: 1rem; )Rännstorleken är inte alltid lika med gapvärdet
Den gapegenskapen är inte det enda som kan sätta utrymme mellan objekt. Marginaler, stoppningar justify-contentoch align-contentkan också öka rännans storlek och påverka det verkliga gapvärdet.
I följande exempel ställer vi in en 1em gapmen som du kan se finns det mycket mer utrymme mellan objekten, orsakad av användningen av distribuerade justeringar, som justify-contentoch align-content:
Webbläsarstöd
Funktionsfrågor är vanligtvis ett trevligt sätt att kontrollera om en webbläsare stöder en viss egendom, men i det här fallet, om du söker efter gapegenskapen i flexbox, kan du få en falsk positiv eftersom en funktionsfråga inte skiljer mellan layoutlägen. Med andra ord kan det stödjas i en flexlayout vilket resulterar i ett positivt resultat, men det stöds faktiskt inte om det används i en rutnätlayout.
Rutnätslayout
| IE | Kant | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Nej | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android-webbläsare | Chrome för Android | Firefox för Android |
|---|---|---|---|---|
| 12+ | Nej | 81+ | 84+ | 68+ |
Rutnätlayout med calc () värden
| IE | Kant | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Nej | 84+ | 79+ | 84+ | Nej | 69+ |
| iOS Safari | Opera Mobile | Android-webbläsare | Chrome för Android | Firefox för Android |
|---|---|---|---|---|
| Nej | Nej | 81+ | 84+ | 68+ |
Rutnätlayout med procentvärde
| IE | Kant | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Nej | 84+ | 79+ | 84+ | Nej | 69+ |
| iOS Safari | Opera Mobile | Android-webbläsare | Chrome för Android | Firefox för Android |
|---|---|---|---|---|
| Nej | Nej | 81+ | 84+ | 68+ |
Flex layout
Specifikationen för användning gapmed flexbox är för närvarande i Working Draft-status.
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 84 | 63 | Nej | 84 | TP |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Nej | Nej |
Layout med flera kolumner
| IE | Kant | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Nej | 84+ | 79+ | 84+ | Nej | 69+ |
| iOS Safari | Opera Mobile | Android-webbläsare | Chrome för Android | Firefox för Android |
|---|---|---|---|---|
| Nej | Nej | 81+ | 84+ | 68+ |
Mer information
- CSS Box Alignment Module nivå 3
- Chromium får Flexbox-luckan (biljett nr 761904)
- WebKit CSS-funktionsstatus
Relaterad
- Rutnätslayout
- Flexbox-layout
- Layout med flera kolumner