Hvordan CSS Gap legger til plass for å forbedre weblayouter

Hurtigkoblinger

• Hvordan skrive CSS gap-egenskapen

• Bruke gap med flerkolonneoppsett

Viktige takeaways

• CSS gap er en allsidig egenskap som definerer avstanden mellom elementene.
• gap er en snarveiegenskap som kan ta to verdier for å definere rad- og kolonnegap.
• gap kan brukes med Flexbox, Grid og Multi-column layouts.

CSS tilbyr mange måter å legge ut elementer på nettsidene dine, fra absolutt posisjonering til rutenettbasert design. Avstanden rundt og mellom elementene er like viktig, og igjen er det mange alternativer. Gap-egenskapen er en nyttig og allsidig måte å introdusere hvite områder på, og den fungerer med flere forskjellige layoutskjemaer.

Hva er gap?

CSS gap er en enkel, men essensiell stilegenskap som hjelper deg med å definere avstanden mellom designoppsettene dine. Å gi elementene plass er en av de gylne reglene for komposisjon som du bør bruke for tiltalende, effektiv grafisk design.

Du kan bruke denne egenskapen til å spesifisere størrelsen på gapene mellom elementer i tre layoutformater:

Alle moderne nettlesere støtter gap-egenskapen som utfyller boksmodellegenskaper som margin og polstring.

Hvordan skrive CSS gap-egenskapen

Den grunnleggende syntaksen for gap-egenskapen er:

 gap: <row-gap> <column-gap>;

Hver verdi kan ha en lengde eller en prosentandel, og kolonne-gap er valgfritt; uten den, ville en enkelt verdi gjelde for både rader og kolonner. Så:

 gap: 10em; 

…betyr at både rader og kolonner vil ha et gap på 10 ganger gjeldende skriftstørrelse, mens:

 gap: 20px 10%; 

… vil produsere et radgap på 20 piksler og et kolonnegap som er en tiendedel av det inneholdende elementets bredde.

Du bør bruke gap med beholderelementer som definerer oppsettet, i stedet for elementer i beholderen. Eiendommen tar sikte på å skape ensartet avstand mellom elementer i stedet for mer kompleks, variabel avstand.

Bruker gap med Flexbox

Du kan bruke gap til å kontrollere avstanden mellom radene og kolonnene som en fleksibel layout oppretter. Fleksiretningen oppsettet ditt bruker vil avgjøre om radgapet eller kolonnegapet gjelder.

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;
}
 

Produserer denne layouten:

Merk at hvert element i beholderen bruker klassiske boksmodellegenskaper for mellomrom: utfylling og marg. Legger til et gap:

 .flex-layout { gap: 20px; } 

Vil øke avstanden mellom fleksible elementer, men ikke rundt dem:

Hvis det fleksible oppsettet ditt viser elementer på tvers av både kolonner og rader – ved å pakke elementer, for eksempel:

 .flex-layout {
    gap: 20px 40px;
    flex-wrap: wrap;
} 

Du vil se effekten av begge hullene:

Husk alltid 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 With Grid

Du kan også bruke gap med et rutenettoppsett. Hovedforskjellen er at du vanligvis vil spesifisere både rad- og kolonnehull 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 å bruke polstring og marg:

 .grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}
.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
}
 

Resultatet er et typisk rutenettoppsett:

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 kolonnegapet gjelder her, og skaper et gap mellom rader som er dobbelt så stort (80px) av gapet mellom kolonner (40px). Husk at hvis du 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 bare en enkelt verdi er relevant i dette tilfellet; det er ingen rader. Oppsett med flere kolonner har et standardgap:

 .column-layout {
    column-count: 3;
} 

Men den er veldig liten, med en størrelse på 1em:

Dette er spesielt merkbart når du varierer skrifttypen, og spesielt hvis du rettferdiggjør 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 plass til å puste.

 .column-layout {
    gap: 2em;
} 

Du kan 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 Chromes Dev Tools for å sjekke oppsettene dine og se hvordan egenskaper som gap og margin påvirker oppsettene dine.

Når du bruker to verdier for gap, sjekk at du har dem riktig vei. Rekkefølgen «rad, kolonne» kan være lite intuitiv, men den samsvarer med rekkefølgen til andre snarveiegenskaper som utfylling og margin.

Den nøyaktige måten du vil bruke gapet på vil variere avhengig av hvilket layoutskjema du bruker det på. Generelt bør du imidlertid strekke deg etter gap når du trenger vanlig plass mellom gjenstandene, men ikke rundt dem.