Een handleiding voor CSS Grid: Opmaak beheersen met rastereigenschappen

Het positioneren van elementen op een webpagina kan erg ingewikkeld zijn als je met complexe lay-outs werkt. Dit is waar het CSS raster van pas komt. Het is een lay-outsysteem dat is ontworpen om het maken van complexe lay-outs te vereenvoudigen.

Het gebruik van CSS Grid biedt een uniek voordeel ten opzichte van conventionele lay-outtechnieken doordat het de plaatsing van elementen in zowel rijen als kolommen binnen een tweedimensionaal kader mogelijk maakt. Deze flexibele indeling verbetert het ontwerpproces in vergelijking met meer beperkende alternatieven die beperkt zijn tot één dimensie.

Rastercontainers en -items

Wanneer u CSS Grid gebruikt, kunt u de eigenschappen toepassen op zowel bovenliggende als onderliggende elementen. Door de eigenschap display in te stellen op "grid" op een ouder element, wordt het omgezet in een rastercontainer, waarbij alle volgende kindelementen vervolgens rasteritems worden en de gespecificeerde rastereigenschappen erven.

Zo wordt het weergegeven:

Een rasterelement kan zelf transformeren in een rastercontainer. Deze configuratie staat bekend als een geneste rasterstructuur, waarbij een raster binnen een ander raster bestaat. In dit scenario wordt de primaire rastercontainer aangeduid als het buitenste raster, terwijl het getransformeerde element de rol van het binnenste raster overneemt.

De individuele rasters functioneren autonoom ten opzichte van elkaar; de attributen die zijn toegewezen aan een intern raster hebben dus geen invloed op de indeling van het externe raster en omgekeerd.

Zo ziet het eruit:

Een grondig begrip van de wisselwerking tussen rastercontainers en hun inhoud is onontbeerlijk wanneer je coherente, tweedimensionale opstellingen met precisie probeert te construeren.

Houd er rekening mee dat rastercontainers hun eigen set eigenschappen hebben, terwijl die met betrekking tot rasteronderdelen daarvan verschillen.

Rasterlijnen en -sporen

Voordat u zich verdiept in het gebruik van CSS Grid, is het noodzakelijk om een goed begrip te hebben van twee fundamentele concepten:

Rasterlijnen vertegenwoordigen de horizontale en verticale lijnen die de structuur van een CSS rasterindeling creëren door de begin- en eindpunten van rijen en kolommen te definiëren. Net als de randen van fysieke dozen, hebben deze lijnen numerieke waarden voor precieze plaatsing binnen het rastersysteem. De illustratie toont een rode stippellijn die de aanwezigheid van rasterlijnen weergeeft.

⭐ Rastersporen: Dit zijn de openingen tussen rasterlijnen die rijen en kolommen definiëren.Het zijn als het ware de bouwstenen van de rasterlay-out. In de bovenstaande afbeelding stelt het gekleurde gebied binnen elk item het raster voor.

Beschouw rasterlijnen en -sporen als analoog aan de lijnen op grafiekpapier, die fungeren als de basis voor een rasterlay-out. Wanneer een horizontale rasterlijn en een verticale rasterlijn elkaar kruisen, ontstaat een rechthoekige cel die dient om rasterelementen in te plaatsen.

CSS Grid Container Properties

grid", daarnaast bestaan er aanvullende CSS-eigenschappen die kunnen worden gebruikt om een harmonieuze verdeling van visuele elementen en hun bijbehorende posities op de webpagina te bereiken. Enkele hiervan zijn:

Rastersjabloon

Deze eigenschap regelt de afmetingen van rijen en kolommen, die kunnen worden bepaald in termen van pixels, procenten of fracties. Bovendien zijn verschillende sleutelwoorden zoals “auto”, “minmax”, “repeat” beschikbaar voor meer veelzijdigheid.

⭐grid-template-pijlen: Stelt rijhoogten in.

⭐grid-template-kolommen: Definieert kolombreedten.

Hier volgen enkele voorbeelden:

Pixels gebruiken:

 .grid-container {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-rows: 250px 250px;
} 

Percentages gebruiken:

 .grid-container {
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 50% 50%;
} 

Gebruik van fr:

 .grid-container {
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 2fr;
}

Gebruik van auto en minmax() Trefwoorden:

 .grid-container {
  grid-template-columns: auto minmax(150px, 1fr) auto;
  grid-template-rows: 100px auto;
}

Repeat() gebruiken voor consistente grootte:

 .grid-container {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 150px);
}

Automatisch plaatsen en rastersjabloongebieden

Automatisch plaatsen zorgt voor een geautomatiseerd proces van itemindeling binnen een rastersysteem, zonder specifieke positionering of organisatie door de gebruiker. In plaats daarvan bepaalt het raster algoritmisch de optimale plaatsing op basis van de volgorde waarin items in de broncode staan. Deze functie kan vooral handig zijn in situaties waar veel elementen uniform over een lay-out moeten worden verdeeld, zodat de beschikbare ruimte efficiënt kan worden gebruikt zonder handmatige tussenkomst.

Rastersjabloongebieden dienen als kader voor het organiseren en structureren van inhoud binnen een rastercontainer, door specifieke gebieden of “zones” te definiëren die worden geïdentificeerd door hun respectieve namen. Deze benoemde gebieden functioneren op dezelfde manier als kamerlabels in een blauwdruk van een gebouw, waardoor ontwerpers posities kunnen toewijzen aan rasterelementen op basis van hun aangewezen zonereferenties. Door deze methode te gebruiken, kunnen ontwikkelaars complexe en precieze lay-outstructuren maken met meer gemak en flexibiliteit.

 .grid-container {
  grid-template-areas:'header header header header'
    'sidebar main main right'
    'sidebar content content right'
    'footer footer footer footer';
}

De huidige configuratie heeft een matrix met drie kolommen en vier rijen.Het bevat twee rijen die dienen als het primaire inhoudsgebied. De aangewezen gebieden omvatten “header”, “sidebar”, “content” en “footer”. Vervolgens gaan we dieper in op de fijne kneepjes van het gebruik van deze gebiedsaanduidingen binnen de attributen van elk rasterelement.

Uitlijning in CSS raster

Je kunt uitlijningsattributen gebruiken om de plaatsing van rasterelementen in hun respectievelijke rastercellen te regelen. Deze eigenschappen zijn onder andere:

⭐ justify-items : Regelt de horizontale uitlijning van items binnen hun rastercel.

De waarden die van belang zijn, zijn het beginpunt, eindpunt, centrale locatie en mate van extensie geassocieerd met deze gegevensverzameling.

⭐ align-items : Controleert de verticale uitlijning van items binnen hun rastercel.

De waarden van belang in deze context zijn het beginpunt, eindpunt, centrale locatie en mate van elasticiteit geassocieerd met deze parameters.

⭐ justify-content : Lijnt het volledige raster binnen de container uit langs de horizontale as.

De waarden die kunnen worden gebruikt om de afstand tussen instanties van een markeercluster in te stellen zijn “begin”, “einde”, “midden”, “uitrekken”, “ruimte-tussen”, “ruimte-om” en “ruimte-gelijk”.

⭐ align-content : Lijnt het hele raster binnen de container uit langs de verticale as.

De beschikbare waarden voor het regelen van de ruimte tussen items in een flexcontainer zijn “start”, “end”, “center”, “stretch”, “space-between”, “space-around” en “space-evenly”.

Hier is een voorbeeld:

 .grid-container {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  align-content: center;
} 

Centralisatie wordt bereikt door de ruimte gelijkmatig te verdelen over alle kolommen van het hele raster, waarbij elk item zowel horizontaal als verticaal in het midden wordt geplaatst binnen zijn respectieve cel. De resulterende opstelling zorgt ervoor dat het raster een gebalanceerde dispositie aanneemt, met gelijke afstanden tussen aangrenzende elementen, terwijl het een rechtopstaande oriëntatie behoudt die is uitgelijnd met de verticale as van de oudercontainer.

Rasterafstand

Rasterafstand, ook bekend als celafstand of interelementafstand, heeft betrekking op de open ruimte tussen de rijen en kolommen van een rasterlay-out. Dit ontwerpaspect dient om aangrenzende elementen binnen het raster visueel te onderscheiden en biedt wat ademruimte voor elk afzonderlijk item.

Met de eigenschap grid-gap kan de afstand tussen rasterelementen langs zowel rij- als kolomassen worden gespecificeerd, waarbij een reeks eenheden kan worden gebruikt, waaronder pixels (px), percentages (%) en eenheden em (em).

 .grid-container {
  grid-gap: 20px;
} 

Dit voorbeeld bestaat uit een rastercontainer met twee kolommen die twintig pixels uit elkaar staan. Een dergelijke opstelling dient om de kolommen zowel visueel als qua lay-out af te bakenen, waardoor hun onderscheidend vermogen wordt vergroot.

CSS Grid Item Eigenschappen

Zeker! De presentatie schetst een aantal kritieke kenmerken die het gedrag van individuele items binnen een CSS Grid-opstelling regelen, vergezeld van illustratieve voorbeelden:

grid-row-start en grid-row-end:

De begin- en eindlijnindices van een bepaald element worden gespecificeerd door deze eigenschap.

Waarden voor span kunnen regelnummers bevatten, zoals “span n”, of ze kunnen worden ingesteld om automatisch aan te passen op basis van de grootte van het scherm met de instelling “auto”.

 .grid-item-1 {
  grid-row-start: 2;
  grid-row-end: 4;
}

De gegeven code positioneert Rasteronderdeel 1 binnen een bereik van rijen, dat zich uitstrekt van de verticale uitlijning van de tweede rij tot de overeenkomstige positie van de vierde rij.

grid-column-start en grid-column-end:

De functie Bereik wordt gebruikt om de begin- en eindkolomnummers van een bepaald item in een tabel of werkblad te definiëren. Hiermee kun je specificeren welk deel van de gegevens moet worden opgenomen wanneer ernaar wordt verwezen, of dit nu voor weergavedoeleinden is of als onderdeel van een formuleberekening.

Waarden kunnen verschillende vormen aannemen, zoals regelnummers, “span n” of “auto”.

 .grid-item-2 {
  grid-column-start: 1;
  grid-column-end: 3;
}

De gegeven code positioneert Rasteritem 2 zodanig dat het zich over drie kolommen uitstrekt, beginnend bij de eerste regel van de eerste kolom en eindigend op de laatste regel van de tweede kolom.

raster-gebied:

Met de CSS-eigenschap grid-template-areas kun je de afmetingen en plaatsing van een element binnen een rastercontainer specificeren door naar specifieke rasterlijnen te verwijzen via hun respectieve namen.

Zeker! Het gebruik van vooraf bepaalde regiolabels wordt momenteel vergemakkelijkt door de implementatie van de eigenschap grid-template-areas . Een demonstratie van de integratie hiervan met de grid-area eigenschap kan als volgt worden bekeken:

 .header {
  grid-area: header;
}
.sidebar {
  grid-area: sidebar;
}
.main {
  grid-area: main;
}
.content {
  grid-area: content;
}
.right {
  grid-area: right;
}
.footer {
  grid-area: footer;
} 

Hier is het resultaat:

justify-self:

Horizontale uitlijning van individuele items binnen een cel wordt bereikt door ze uit te lijnen langs de horizontale as.Dit kan worden gedaan met behulp van verschillende opmaakopties, zoals tekstuitlijning of instellingen voor tabeleigenschappen. De specifieke methode om dit te bereiken hangt af van de context en de vereisten van de specifieke toepassing waarin het wordt gebruikt.

Waarden in grafisch ontwerp omvatten een reeks mogelijkheden, waaronder zich bevinden aan het begin of einde van het traject van een element, dienen als een centraal punt waar andere elementen omheen draaien, of zich uitstrekken voorbij gestelde grenzen om elasticiteit te creëren. Deze verschillende posities maken verschillende visuele effecten mogelijk die bijdragen aan de algehele compositie.

 .grid-item-5 {
  justify-self: center;
}

De gegeven code lijnt het vijfde rasteritem, rasteritem 5, horizontaal uit in het midden van zijn respectievelijke cel binnen de rasterlay-out.

align-self:

Wijzig de uitlijning van elk item in een kolom zodat ze verticaal gepositioneerd worden in hun respectievelijke cellen.

Waarden kunnen verschillende vormen aannemen, zoals een beginpunt, een eindpunt, een centrale referentie of een middel om buiten het typische bereik uit te breiden.

 .grid-item-1 {
  align-self: end;
}

Dit specifieke stukje code oriënteert en positioneert “Rasteritem 1” zodanig dat het op het laagste punt rust binnen zijn respectievelijke rastercel.

Je wordt aangemoedigd om creatieve controle uit te oefenen over de visuele presentatie van individuele rasteritems door een combinatie van verschillende stilistische eigenschappen te gebruiken en zo een esthetiek te bereiken die overeenstemt met de gewenste ontwerpdoelen.

Responsieve lay-outs maken met behulp van CSS rasters

Het gebruik van CSS rastersystemen is cruciaal bij het maken van responsieve ontwerpen die zich moeiteloos aanpassen aan verschillende schermafmetingen en gadgets, zodat de gebruiker een soepele ervaring heeft op verschillende schermformaten en apparaten. Er zijn verschillende technieken die je kunt gebruiken om dit doel effectief te bereiken.

Het gebruik van media queries in combinatie met CSS Grid Layout zorgt voor adaptieve responsiviteit op basis van schermgrootte. Dit stelt webdesigners en -ontwikkelaars in staat om de indeling van rasterelementen dynamisch aan te passen en de kolombreedte aan te passen op basis van verschillende schermafmetingen, waardoor een optimale kijkervaring op verschillende apparaten en resoluties wordt gegarandeerd.

Gebruik flexibele maten zoals procentuele waarden en “fr” om een responsieve schaling van rasterelementen en kolommen mogelijk te maken, proportioneel met de beschikbare ruimte.

Gebruik de functie minmax() om een bereik van afmetingen voor rastercellen vast te stellen. Dit bevordert de leesbaarheid en compatibiliteit op verschillende schermresoluties door te voorkomen dat inhoud te klein of te groot wordt.

Pas de bijgeleverde tekst aan om dezelfde boodschap op een meer verfijnde manier over te brengen. Bij het aanpassen van de afmetingen van kolommen, de ruimte tussen rasterelementen, lettertypen en witruimte is het cruciaal om consistentie te behouden in je ontwerp voor een optimale weergave op verschillende platforms.

Verken de mogelijkheden van CSS Grid Layout

Door gebruik te maken van de veelzijdigheid en kracht van CSS Grid, kunt u esthetisch aantrekkelijke en naadloze lay-outs maken die tegemoetkomen aan zowel de visuele aantrekkingskracht als de steeds veranderende eisen van hedendaags webdesign. Verdiep u daarom in de wereld van grids, onderzoek hun mogelijkheden en verbeter uw vaardigheid in webontwikkeling.

Bij het verkennen van verschillende lay-outtechnieken is het vaak nuttig om CSS Grid af te zetten tegen alternatieve benaderingen zoals Flexbox. De CSS Flexbox-module biedt een middel waarmee je de meest geschikte aanpak voor je specifieke ontwerpeisen in een bepaald project kunt evalueren en bepalen.