Hoe CSS Gap ruimte toevoegt om weblay-outs te verbeteren

Snelle links

⭐ Wat is gap?

⭐ Hoe schrijf je de CSS gap-eigenschap

⭐ Gap gebruiken met Flexbox

⭐ Gap gebruiken met raster

⭐ Gap gebruiken met meerdere kolommen

### Belangrijkste opmerkingen

De eigenschap CSS gap dient als een aanpasbare manier om de interruimtelijke relatie tussen verschillende ontwerpcomponenten binnen de lay-out van een webpagina af te bakenen.

De eigenschap “gap” biedt een handige manier om zowel horizontale als verticale tussenruimte te specificeren door afzonderlijke waarden voor respectievelijk rijen en kolommen aan te geven.

Het gebruik van een void element is compatibel met verschillende CSS opmaaksystemen zoals Flexbox, Grid en multi-kolom arrangementen.

Cascading Style Sheets (CSS) biedt een scala aan methoden voor het organiseren van de plaatsing van elementen binnen een webpagina, variërend van precieze positioneringstechnieken tot meer flexibele rastergebaseerde ontwerpen. Net zo belangrijk is het om rekening te houden met de tussenruimte en de verdeling van witruimte rondom en tussen deze componenten, wat op verschillende manieren kan worden bereikt. Eén zo’n methode is het gebruik van de gap-eigenschap, die bekend staat om zijn aanpassingsvermogen aan verschillende structurele configuraties.

Wat is gap?

Op het gebied van visueel ontwerp zijn het gebruik van witruimte en vaardige manipulatie van de CSS eigenschap “tussenruimte” fundamentele principes voor het bereiken van een esthetisch aantrekkelijke en functioneel verantwoorde opstelling. De oordeelkundige toepassing van deze schijnbaar eenvoudige eigenschap dient als hoeksteen voor het creëren van harmonieuze composities die zowel op cognitief als emotioneel niveau aanslaan bij kijkers.

U kunt deze eigenschap gebruiken om de afmetingen van de tussenruimten tussen elementen in drie verschillende ruimtelijke ordeningen aan te duiden:

⭐ Flexible Box Layout (“Flexbox”)

⭐Grid Layout

⭐Multi-column Layout

Alle moderne webbrowsers ondersteunen het gap attribuut, dat dient als aanvulling op boxmodel kwaliteiten zoals marges en paddings.

Hoe de CSS eigenschap gap te schrijven

De fundamentele structuur van de eigenschap gap kan als volgt worden uitgedrukt:

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

Elke waarde kan bestaan uit een meting of een verhouding, en optioneel een rij- of kolomafstand. Als er geen tussenruimte is gespecificeerd, zal een enkel cijfer zowel het aantal rijen als kolommen bepalen.Bijgevolg kun je de volgende configuraties tegenkomen:

 gap: 10em; 

Dit houdt in dat zowel de rijen als de kolommen een spatiëring van tien keer de huidige lettergrootte zullen vertonen.

 gap: 20px 10%; 

De implementatie creëert een tussenruimte van 20 eenheden in horizontale richting (rij) en een tussenruimte gelijk aan een tiende van de breedte van het omsluitende element in verticale richting (kolom).

Wanneer je containerelementen gebruikt voor lay-outdoeleinden, is het aan te raden om tussenruimtes te gebruiken in plaats van individuele elementen met tussenruimtes op te nemen in deze containers. Met deze aanpak wordt een consistente inter-itemafstand gecreëerd, in tegenstelling tot ingewikkelde en inconsistente variaties in de interlinie.

Spleet gebruiken met Flexbox

Je kunt de eigenschap “spleet” in een flexlay-out gebruiken om de afstand tussen de rijen en kolommen te regelen, waarbij de richting van de lay-out bepaalt welk type spleet van toepassing is; rijspleet of kolomspleet.

De standaardopmaak van een item in een flexcontainer is meestal naast elkaar gerangschikt langs de hoofdas of de rijrichting als er geen specifieke instructies zijn gegeven. Dit kan worden bereikt met minimale styling met het volgende codefragment:

 .flex-layout {
    display: flex;
}

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

Produceert deze opmaak:

Elk element in een parentcontainer gebruikt traditionele boxmodelattributen, zoals opvulling en marge, om de tussenruimte te bepalen. Een kleine scheiding wordt gecreëerd door een kleine hoeveelheid ruimte toe te voegen met behulp van de eigenschap “gap” in CSS.

 .flex-layout { gap: 20px; } 

Het vergroten van de tussenruimte tussen flexitems resulteert in een tussenruimte tussen elk item, terwijl er geen extra ruimte overblijft rond de individuele items zelf.

Wanneer een flex layout wordt gebruikt om elementen weer te geven die zowel meerdere kolommen als rijen overspannen door technieken zoals wrapping toe te passen, kunnen items in beide richtingen worden weergegeven. Dit type indeling zorgt voor een efficiënt gebruik van de ruimte en behoudt tegelijkertijd een georganiseerd uiterlijk.

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

Je ziet het effect van beide tussenruimten:

Wanneer je de indeling van elementen binnen een lay-out overweegt, is het belangrijk om in gedachten te houden dat eigenschappen zoals marge en justify-content de verdeling van ruimte tussen individuele componenten kunnen beïnvloeden. In dit opzicht moet de eigenschap tussenruimte worden gezien als een basismeting, met dien verstande dat andere factoren de totale tussenruimte kunnen beïnvloeden.Het is essentieel om er niet van uit te gaan dat het instellen van tussenruimte alleen volledige controle biedt over de plaatsing van elementen, maar om te overwegen hoe andere relevante eigenschappen op elkaar inwerken en bijdragen aan het bepalen van het uiteindelijke resultaat.

Gat gebruiken met raster

U kunt ook hiaten gebruiken in combinatie met een rasterlay-out, hoewel er een aantal verschillen zijn waarmee u rekening moet houden. Meestal zal het nodig zijn om zowel rij- als kolomafstanden aan te geven omdat Raster beter is uitgerust voor multidimensionale opstellingen.

Rasterindelingen vertonen ook een inherente neiging om elementen naast elkaar uit te lijnen, wat kan worden gewijzigd door het gebruik van marginale aanpassingen en intraluminale demping.

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

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

Het resultaat is een typische rasterindeling:

Door een tussenruimte toe te voegen:

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

wordt er ruimte tussen elk item ingevoegd:

Overweeg het effect van verschillende waarden voor rij- en kolomafstanden op het creëren van een ruimte die dubbel zo breed is als de ruimte tussen de kolommen, terwijl de afstand tussen rijen en kolommen consistent blijft. Onthoud dat wanneer je een uniforme waarde gebruikt, deze de gemeenschappelijke afstand tussen rijen en kolommen bepaalt.

Spleet gebruiken bij indelingen met meerdere kolommen

Kolommen in een kolomindeling kunnen ook de eigenschap Spleet gebruiken voor de afstand tussen kolommen. Wanneer u echter een opmaak met één waarde gebruikt, is slechts één tussenruimtewaarde van toepassing en deze is van toepassing op alle kolommen samen in plaats van individueel op elke rij. Op kolommen gebaseerde lay-outs met meerdere kolommen hebben een inherente standaardafstand die de ruimte tussen de kolommen bepaalt.

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

De meting van de lettergrootte wordt uitgedrukt in em-eenheden, die relatief zijn ten opzichte van de lettergrootte van het bovenliggende element. Een em-eenheid is gelijk aan de huidige lettergrootte van het bovenliggende element vermenigvuldigd met één. Als het bovenliggende element een lettergrootte van 16 pixels heeft, is een em-eenheid dus gelijk aan 16 pixels of ongeveer 0,375 inch.

Dit fenomeen wordt meer uitgesproken bij het wijzigen van het lettertype en in het bijzonder bij het uitlijnen van de inhoud langs de randen:

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

De aaneenschakeling van bovengenoemde zinnen leidt tot overlapping en een overvolle opmaak, wat de leesbaarheid kan belemmeren en ongemak kan veroorzaken tijdens het lezen.

Het vergroten van de ruimte tussen kolommen door een specifieke marge te definiëren, zorgt voor een betere visuele uitlijning en ademruimte, wat resulteert in een betere leesbaarheid en algehele esthetische aantrekkingskracht van het ontwerp.

 .column-layout {
    gap: 2em;
} 

Je kunt ontdekken dat het gebruik van lettergroottes zoals 2em of 3em een leesbaarder resultaat kan opleveren, rekening houdend met extra overwegingen zoals de afmetingen van je kolombreedtes.

Als u een browserhulpmiddel gebruikt, zoals de hulpmiddelen voor ontwikkelaars in Google Chrome, kunt u uw lay-out effectief onderzoeken en zien hoe specifieke attributen, zoals spatiëring en marges, het algemene uiterlijk beïnvloeden.

Wanneer u dubbele waarden voor tussenruimte gebruikt, moet u ervoor zorgen dat ze op de juiste manier worden gerangschikt. Hoewel de volgorde “rij, kolom” contra-intuïtief lijkt, komt deze overeen met de volgorde van aanvullende snelkoppelingsattributen zoals opvulling en marge.

Gap is een veelzijdig hulpmiddel dat op verschillende manieren kan worden toegepast op basis van de specifieke ontwerpvereisten van je project. De primaire functie blijft echter consistent in alle toepassingen - het bieden van uniforme ruimte tussen elementen met behoud van een schoon en georganiseerd uiterlijk.