Raske Lenker
Viktige Punkter
- CSS gap er en fleksibel egenskap som spesifiserer avstanden mellom elementer.
- gap er en forkortet egenskap som kan bruke to verdier for å angi rad- og kolonneavstand.
- gap kan anvendes med Flexbox, Grid og flerkolonneoppsett.
CSS tilbyr et mangfold av metoder for å organisere elementer på nettsider, alt fra absolutt posisjonering til rutenettbasert struktur. Avstanden rundt og mellom elementene er like sentral, og også her finnes det en rekke alternativer. Gap-egenskapen er en praktisk og allsidig måte å introdusere tomrom på, og den fungerer med flere forskjellige layoutmodeller.
Hva er gap?
CSS gap er en enkel, men avgjørende stilegenskap som hjelper deg med å kontrollere avstanden i designene dine. Å gi elementene plass er et fundamentalt prinsipp for komposisjon som du bør benytte deg av for tiltalende og effektiv grafisk design.
Du kan bruke denne egenskapen til å definere størrelsen på avstandene mellom elementer i tre layouttyper:
Alle moderne nettlesere støtter gap-egenskapen, som utfyller eksisterende boksmodelleegenskaper som margin og padding.
Slik skriver du CSS gap-egenskapen
Den grunnleggende syntaksen for gap-egenskapen er:
gap: <rad-gap> <kolonne-gap>;
Hver verdi kan være en lengde eller en prosentandel, og kolonne-gap er valgfritt; uten den vil en enkelt verdi gjelde for både rader og kolonner. Så:
gap: 10em;
…betyr at både rader og kolonner vil ha en avstand på 10 ganger gjeldende skriftstørrelse, mens:
gap: 20px 10%;
…vil resultere i en radavstand på 20 piksler og en kolonneavstand som er en tidel av bredden til det omsluttende elementet.
Du bør bruke gap med beholder-elementer som definerer layouten, i stedet for elementer inne i beholderen. Hensikten med egenskapen er å skape jevn avstand mellom elementer, snarere enn mer kompleks, varierende avstand.
Bruk av gap med Flexbox
Du kan bruke gap til å regulere avstanden mellom radene og kolonnene som en fleksibel layout oppretter. Fleksibilitetsretningen til layouten din vil bestemme om radgapet eller kolonnegapet blir brukt.
Som standard, i normal radretning, vil elementer i en fleksibel beholder vises ved siden av hverandre. Så denne enkle CSS:
.flex-layout {
display: flex;
}.flex-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Gir denne layouten:
Legg merke til at hvert element i beholderen benytter klassiske boksmodelleegenskaper for avstand: padding og margin. Ved å legge til et gap:
.flex-layout { gap: 20px; }
Vil øke avstanden mellom fleksible elementer, men ikke rundt dem:
Hvis den fleksible layouten din viser elementer på tvers av både kolonner og rader – ved å bryte elementer, for eksempel:
.flex-layout {
gap: 20px 40px;
flex-wrap: wrap;
}
Vil du se effekten av begge gapene:
Husk at andre egenskaper, som margin og justify-content, kan påvirke avstanden mellom elementene. Tenk på gap som en minimumsverdi, med mindre du eksplisitt kontrollerer alle andre egenskaper som kan påvirke avstanden.
Bruke gap med Grid
Du kan også anvende gap med en rutenettlayout. Den viktigste forskjellen er at du typisk vil spesifisere både rad- og kolonneavstand siden Grid er mer egnet for todimensjonale oppsett.
Som i en Flex-layout vil Grid vise elementer rett ved siden av hverandre som standard, selv om du kan kontrollere avstanden rundt hvert element ved hjelp av padding og margin:
.grid-layout {
display: grid;
grid-template-columns: 100px 80px 100px;
}.grid-layout div {
padding: 1em;
margin: 10px;
outline: 1px solid black;
}
Resultatet er en standard rutenettoppsett:
Ved å legge til et gap:
.grid-layout {
gap: 80px 40px;
}
Vil sette inn mellomrom mellom hvert element:
Legg merke til hvordan de individuelle verdiene for rad- og kolonneavstand gjelder her, og skaper et gap mellom rader som er dobbelt så stort (80px) som gapet mellom kolonner (40px). Husk at hvis du bare bruker én enkelt verdi, vil du definere det samme gapet mellom rader og kolonner.
Bruke gap med flerkolonneoppsett
Du kan også bruke gap-egenskapen med kolonneoppsett, men kun en enkelt verdi er relevant i dette tilfellet; det finnes ingen rader. Flerkolonneoppsett har et standard gap:
.column-layout {
column-count: 3;
}
Men det er svært lite, med en størrelse på 1em:
Dette er spesielt merkbart når du varierer skriftstørrelsen, og spesielt hvis du justerer teksten:
.column-layout {
font-size: 14pt;
line-height: 1.4;
text-align: justify;
}
De resulterende tekstlinjene løper inn i hverandre og blir ubehagelige å lese:
Ved å spesifisere et gap kan du øke avstanden mellom kolonnene og gi dem mer rom.
.column-layout {
gap: 2em;
}
Du vil kanskje finne ut at 2em eller til og med 3em gir et mer lesbart resultat, avhengig av andre faktorer som bredden på kolonnene dine:
Husk at du kan bruke et nettleserverktøy som Google Chrome sine Dev Tools for å undersøke layoutene dine og se hvordan egenskaper som gap og margin påvirker oppsettet.
Når du benytter to verdier for gap, må du kontrollere at du har dem i riktig rekkefølge. Rekkefølgen «rad, kolonne» kan føles litt ulogisk, men den stemmer overens med rekkefølgen til andre forkortede egenskaper som padding og margin.
Den presise måten du skal bruke gap på, vil variere avhengig av hvilket layoutskjema du bruker det på. Generelt sett bør du imidlertid bruke gap når du trenger jevn avstand mellom elementene, men ikke rundt dem.