Spalteegenskapen i CSS er en forkortelse for row-gapog column-gapspesifiserer størrelsen på takrenner, som er mellomrommet mellom rader og kolonner i rutenett-, fleks- og flerkolonnelayout.
/* 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; )
Bruk glidebryteren i demoen nedenfor for å se gapeiendommen i aksjon:
Syntaks
gap aksepterer en eller to verdier:
- En enkelt verdi setter både
row-gapogcolumn-gapmed samme verdi. - Når to verdier brukes, setter den første den
row-gapog den andre setter 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%; */ )Spesifikasjonen for CSS Grid Layout Module definerte mellomrom mellom gitterspor ved bruk av grid-gapeiendommen. gaper ment å erstatte den slik at hull kan defineres i flere CSS-layoutmetoder, som flexbox, men grid-gapmå fortsatt brukes i tilfeller der en nettleser kan ha implementert, grid-gapmen ennå ikke har begynt å støtte den nyere gapegenskapen.
Verdier
gap aksepterer følgende verdier:
normal: (Standard) Nettleseren vil spesifisere en brukt verdi på 1 em for flerkolonnelayout og 0px for alle andre layoutkontekster (dvs. rutenett og flex).: Enhver gyldig og ikke-negative CSS lengde, for eksempelpx,em,remog%, blant andre.: Størrelsen på gapet som en ikke-negativ prosentverdi i forhold til dimensjonen til elementet. (Se nedenfor for detaljer.)initial: Bruker egenskapens standardinnstilling, som ernormal.inherit: Vedtar gapverdien til foreldrene.unset: Fjerner strømmengapfra elementet.
Prosentandeler i gapegenskaper
Når størrelsen på en container i gapdimensjonen er bestemt, gapløser prosenter i forhold til størrelsen på containerens innholdsrute i alle layouttyper.
Med andre ord, når nettleseren vet størrelsen på beholderen, kan den beregne prosentverdien av gap. For eksempel når containerens høyde er 100 px og den gaper satt til 10%, vet nettleseren at 10% av 100 px er 10 px.
Men når nettleseren ikke vet størrelsen, vil den lure på "10% av hva?" I disse tilfellene gapoppfører seg annerledes basert på layouttypen.
I et rutenettoppsett løses prosentandeler mot null for å bestemme egensinnsatte størrelsesbidrag, men løses i forhold til elementets innholdsboks når du legger ut innholdet i boksen, noe som betyr at det vil plassere mellomrom mellom elementene, men rommet påvirker ikke beholderens størrelse.
I denne demoen er beholderens høyde ikke bestemt. Se hva som skjer når du øker gapstørrelsen. Sett deretter gapinn pikselenhetene og prøv igjen:
I et fleksibelt oppsett løses prosentandeler mot null i alle tilfeller, noe som betyr at hull ikke vil gjelde når størrelsen på beholderen ikke er kjent for nettleseren:
Bruke calc () -funksjonen med gap
Du kan bruke calc()funksjonen til å spesifisere størrelsen på, gapmen på dette tidspunktet er det ingen støtte for det på Safari og 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); )Eksempler
Den gapegenskapen er beregnet for bruk i nett, flex og multi-kolonne layout. La oss sjekke ut noen eksempler.
Rutenettoppsett
I den følgende demoen kan du se gapbrukt til å spesifisere row-gapog column-gapegenskapene på en rutenettbeholder, og definere takrennene henholdsvis rutenett og rutenettkolonner:
Fleksibel oppsett
Påføring av gap til hovedaksen til en flexcontainer indikerer avstanden mellom flex-elementene i en enkelt linje i flex-oppsettet.
Her column-gapbrukes i en radretning:
Her row-gapbrukes i en kolonneretning:
Påføring gappå tverraksen til en flexcontainer indikerer avstand mellom flexlinjene i flexlayouten.
Her er row-gapi radretning:
Her er column-gapi en kolonne retning:
Flersøyleoppsett
column-gapvises i flerkolonnelayout for å skape mellomrom mellom kolonneboksene, men merk at det ikke row-gaphar noen effekt siden vi bare jobber i kolonner. gapkan fortsatt brukes i denne sammenhengen, men bare column-gapviljen blir brukt.
Som du kan se i neste demo, selv om gapeiendommen har verdien 2rem, skiller den bare elementene horisontalt i stedet for begge retninger siden vi jobber i kolonner:
Jo mer du vet…
Det er et par ting det er verdt å merke seg om å jobbe med gapeiendommen.
Det er en fin måte å forhindre uønsket avstand på
Har du noen gang brukt marger for å skape avstand mellom elementene? Hvis vi ikke er forsiktige, kan vi ende opp med ekstra avstand før og etter varegruppen.
Løsning som vanligvis krever å legge til negative marginer eller ty til pseudovalgere for å fjerne margin fra bestemte elementer. Men det fine med å bruke gapi mer moderne layoutmetoder er at du bare har plass mellom elementene. Den ekstra cruft i starten og slutten er aldri et problem!
Men hei, hvis du vil ha plass rundt varene mens du bruker gap, legg paddingrundt beholderen slik:
.container ( display: flex; gap: 1rem; padding: 1rem; )Rennestørrelse er ikke alltid lik gapverdien
Den gapegenskapen er ikke den eneste som kan sette mellomrom mellom elementer. Marger, polstringer justify-contentog align-contentkan også øke rennestørrelsen og påvirke den faktiske gapverdien.
I det følgende eksemplet setter vi en 1em, gapmen som du ser, er det mye mer mellomrom mellom elementene, forårsaket av bruk av distribuerte justeringer, som justify-contentog align-content:
Nettleserstøtte
Funksjonsspørsmål er vanligvis en fin måte å sjekke om en nettleser støtter en bestemt egenskap, men i dette tilfellet, hvis du ser etter gapeiendommen i flexbox, kan du få en falsk positiv fordi et funksjonsforespørsel ikke skiller mellom layoutmodus. Med andre ord kan det støttes i et fleksibelt oppsett som resulterer i et positivt resultat, men det støttes faktisk ikke hvis det brukes i et rutenettoppsett.
Rutenettoppsett
| DVS | Kant | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nei | 16+ | 61+ | 66+ | 12+ | 53+ |
| iOS Safari | Opera Mobile | Android-nettleser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| 12+ | Nei | 81+ | 84+ | 68+ |
Rutenettoppsett med kalk () verdier
| DVS | Kant | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nei | 84+ | 79+ | 84+ | Nei | 69+ |
| iOS Safari | Opera Mobile | Android-nettleser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| Nei | Nei | 81+ | 84+ | 68+ |
Rutenettoppsett med prosentverdi
| DVS | Kant | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nei | 84+ | 79+ | 84+ | Nei | 69+ |
| iOS Safari | Opera Mobile | Android-nettleser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| Nei | Nei | 81+ | 84+ | 68+ |
Fleksibel oppsett
Spesifikasjonen for bruk gapmed flexbox er for tiden i Working Draft-status.
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 84 | 63 | Nei | 84 | TP |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | Nei | Nei |
Flersøyleoppsett
| DVS | Kant | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nei | 84+ | 79+ | 84+ | Nei | 69+ |
| iOS Safari | Opera Mobile | Android-nettleser | Chrome for Android | Firefox for Android |
|---|---|---|---|---|
| Nei | Nei | 81+ | 84+ | 68+ |
Mer informasjon
- CSS Box Alignment Module Nivå 3
- Chromium får Flexbox-gap (billett nr. 761904)
- WebKit CSS-funksjonsstatus
I slekt
- Rutenettoppsett
- Flexbox Layout
- Flersøyleoppsett