Hur CSS Gap lägger till utrymme för att förbättra webblayouter

Snabblänkar

⭐ Vad är gap?

⭐ Hur man skriver CSS-egenskapen gap

⭐ Använda gap med Flexbox

⭐ Använda gap med Grid

⭐ Använda gap med Multi-kolumnlayouter

Viktiga lärdomar

CSS-egenskapen gap fungerar som ett anpassningsbart sätt att avgränsa det rumsliga förhållandet mellan olika designkomponenter i en webbsidas layout.

Attributet “gap” är ett praktiskt sätt att ange både horisontellt och vertikalt avstånd genom att ange separata värden för rader respektive kolumner.

Användningen av ett void-element är kompatibelt med olika CSS-layoutsystem som Flexbox, Grid och Multi-column-arrangemang.

Cascading Style Sheets (CSS) tillhandahåller en rad olika metoder för att organisera placeringen av element på en webbsida, allt från exakta positioneringstekniker till mer flexibla rutnätsbaserade designer. Lika viktigt är det att ta hänsyn till spridningen och fördelningen av mellanslag runt och mellan dessa komponenter, vilket kan uppnås genom olika tillvägagångssätt. En sådan metod är att utnyttja gap-egenskapen, som är känd för sin anpassningsförmåga i olika strukturella konfigurationer.

Vad är gap?

När det gäller visuell design är användningen av blanksteg och skicklig hantering av CSS-egenskapen “gap” grundläggande principer för att uppnå ett estetiskt tilltalande och funktionellt bra arrangemang. Genom att använda denna till synes enkla egenskap på ett klokt sätt kan man skapa harmoniska kompositioner som berör betraktaren på både en kognitiv och känslomässig nivå.

Du kan använda detta attribut för att ange dimensionerna på mellanrummen mellan element i tre olika rumsliga arrangemang:

⭐ Flexible Box Layout (“Flexbox”)

⭐Grid Layout

⭐Multi-column Layout

Alla moderna webbläsare upprätthåller attributet gap, som fungerar som ett kompletterande element till boxmodellkvaliteter som marginaler och paddings.

Hur man skriver CSS-egenskapen gap

Den grundläggande strukturen för egenskapen gap kan uttryckas på följande sätt:

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

Varje värde kan bestå av antingen ett mått eller en proportion, och valfritt, ett rad- eller kolumnavstånd. Om inget mellanrum anges kommer en enda siffra att styra både antalet rader och kolumner.Följaktligen kan man stöta på följande konfigurationer:

 gap: 10em; 

Detta innebär att både rader och kolumner kommer att ha ett avstånd på tio gånger den aktuella teckenstorleken.

 gap: 20px 10%; 

Implementeringen kommer att skapa ett avstånd på 20 enheter i horisontell riktning (rad) och en separation som motsvarar en tiondel av bredden på det omslutande elementet i vertikal riktning (kolumn).

Vid användning av containerelement för layoutändamål rekommenderas att använda luckor i stället för att införliva enskilda element med mellanrum i containrarna. Detta tillvägagångssätt syftar till att skapa ett konsekvent avstånd mellan artiklarna, i motsats till att skapa komplicerade och inkonsekventa variationer i avståndet.

Använda gap med Flexbox

Du kan använda egenskapen “gap” i en flexlayout för att reglera avståndet mellan raderna och kolumnerna, där layoutens riktning avgör vilken typ av gap som är tillämplig; radgap eller kolumngap.

Standardlayouten för ett objekt i en flexcontainer är vanligtvis ordnad sida vid sida längs huvudaxeln eller radriktningen när ingen specifik instruktion ges. Detta kan uppnås med minimal styling med hjälp av följande kodavsnitt:

 .flex-layout {
    display: flex;
}

.flex-layout div {
    padding: 1em;
    margin: 10px;
    outline: 1px solid black;
} 

Producerar denna layout:

Varje element i en överordnad behållare använder traditionella boxmodellattribut, t.ex. padding och margin, för att skapa avstånd mellan dem. En liten separation skapas genom att lägga till en liten mängd utrymme med hjälp av egenskapen “gap” i CSS.

 .flex-layout { gap: 20px; } 

Om du ökar avståndet mellan flexobjekten skapas ett mellanrum mellan varje objekt, men inget extra utrymme lämnas runt de enskilda objekten.

När en flexlayout används för att visa element som sträcker sig över flera kolumner och rader med hjälp av tekniker som ombrytning, kan det kallas att visa objekt i båda riktningarna. Denna typ av arrangemang möjliggör effektiv användning av utrymme samtidigt som det bibehåller ett organiserat utseende.

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

Du ser effekten av båda luckorna:

När man funderar på hur element ska placeras i en layout är det viktigt att komma ihåg att egenskaper som margin och justify-content kan påverka fördelningen av utrymme mellan enskilda komponenter. I detta avseende bör egenskapen gap ses som ett baslinjemått, med förståelse för att andra faktorer kan påverka det totala avståndet.Det är viktigt att inte anta att enbart inställningen gap ger fullständig kontroll över placeringen av element, utan snarare att överväga hur andra relevanta egenskaper samverkar och bidrar till att bestämma det slutliga resultatet.

Använda gap med Grid

Du kan också använda gap i samband med en Grid-layout, även om det finns vissa skillnader att ta hänsyn till när du gör det. Vanligtvis kommer det att vara nödvändigt att ange både rad- och kolumnavstånd på grund av att Grid är bättre rustat för flerdimensionella arrangemang.

Grid-layouter har också en inneboende benägenhet att placera element intill varandra, vilket kan ändras med hjälp av marginella justeringar och intraluminal dämpning.

 .grid-layout {
    display: grid;
    grid-template-columns: 100px 80px 100px;
}

.grid-layout div {
   padding: 1em;
   margin: 10px;
   outline: 1px solid black;
} 

Resultatet är en typisk rutnätslayout:

Lägga till ett mellanrum:

 ​.grid-layout {
    gap: 80px 40px;
} 

Infogar ett mellanrum mellan varje element:

Tänk på hur olika värden för rad- och kolumnavstånd påverkar skapandet av ett utrymme som är dubbelt så brett som avståndet mellan kolumnerna, samtidigt som avståndet mellan både rader och kolumner bibehålls på ett konsekvent sätt. Kom ihåg att när du använder ett enhetligt värde kommer det att bestämma det gemensamma avståndet mellan rader och kolumner.

Använda gap med flerkolumnslayouter

Kolumner i en kolumnslayout kan också använda egenskapen gap för avståndet mellan kolumnerna. När du använder en layout med ett enda värde är dock endast ett gap-värde tillämpligt och det gäller för alla kolumner tillsammans snarare än individuellt för varje rad. Kolumnbaserade layouter med flera kolumner har ett inbyggt standardgap som bestämmer avståndet mellan dem.

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

Mätningen av teckenstorleken uttrycks i em-enheter, som är relativa till det överordnade elementets teckenstorlek. En em-enhet är lika med den aktuella teckenstorleken för det överordnade elementet multiplicerat med ett. Om det överordnade elementet har en teckenstorlek på 16 pixlar motsvarar därför en em-enhet 16 pixlar eller ungefär 0,375 tum.

Detta fenomen blir mer uttalat när typsnittet ändras och, i synnerhet, när innehållet justeras längs dess kanter:

 .column-layout {
    font-size: 14pt;
    line-height: 1.4;
    text-align: justify;
} 

Sammankopplingen av de ovannämnda meningarna leder till överlappande och överbelastad formatering, vilket kan försvåra läsbarheten och orsaka obehag vid genomläsning.

Att öka avståndet mellan kolumnerna genom att definiera en specifik marginal ger bättre visuell anpassning och andrum, vilket leder till förbättrad läsbarhet och övergripande estetisk tilltalande design.

 .column-layout {
    gap: 2em;
} 

Du kanske upptäcker att teckenstorlekar som 2em eller 3em kan ge ett mer läsbart resultat, med hänsyn till ytterligare överväganden som dimensionerna på dina kolumnbredder.

Att använda ett webbläsarbaserat verktyg, t.ex. de som finns i Google Chromes utvecklarverktyg, är ett effektivt sätt att granska sin layout och observera hur specifika attribut, inklusive avstånd och marginaler, påverkar dess övergripande utseende.

När du använder dubbla värden för gap ska du se till att de är ordnade på rätt sätt. Även om arrangemanget “rad, kolumn” kan verka kontraintuitivt stämmer det överens med ordningsföljden för ytterligare genvägsattribut som utfyllnad och marginal.

Gap är ett mångsidigt verktyg som kan användas på olika sätt baserat på de specifika designkraven för ditt projekt. Dess primära funktion är dock densamma i alla applikationer - att ge enhetligt avstånd mellan element och samtidigt bibehålla ett rent och organiserat utseende.