Leer hoe u CSS-rasters kunt gebruiken om eenvoudig complexe lay-outs te maken.

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

Hoe helpt het jou? In tegenstelling tot traditionele lay-outmethoden waarmee u elementen alleen in rijen of kolommen kunt positioneren, biedt het CSS-raster u het beste van twee werelden: een 2D-aanpak met behulp van rijen en kolommen.

Rastercontainers en items

U kunt CSS-rastereigenschappen toepassen op twee hoofdtypen elementen: ouder en kinderen. Wanneer u de weergave-eigenschap voor een bovenliggend element instelt op "raster", wordt dat element getransformeerd in een rastercontainer. Elk onderliggend element binnen deze rastercontainer wordt een rasteritem en neemt de toegepaste rastereigenschappen over.

Hier ziet u hoe het wordt weergegeven:

Een rasteritem kan ook een rastercontainer worden. U kunt de lay-out nu een genest raster noemen: een raster binnen een raster. De hoofdrastercontainer wordt nu het buitenste raster genoemd, terwijl de item-gedraaide rastercontainer een binnenste raster wordt.

instagram viewer

Elk van deze rasters werkt onafhankelijk van de ander, wat betekent dat de eigenschappen die zijn ingesteld voor een binnenraster geen invloed hebben op de lay-out van het buitenraster, en omgekeerd.

Zo ziet het eruit:

Het beheersen van de relatie tussen rastercontainers en items is essentieel voor het bouwen van tweedimensionale lay-outs effectief.

Houd er rekening mee dat er rastereigenschappen zijn voor rastercontainers, terwijl andere voor rasteritems gelden.

Rasterlijnen en sporen

Voordat u het CSS-raster gaat gebruiken, zijn er twee belangrijke termen waarmee u bekend moet zijn:

  1. Rasterlijnen: Rasterlijnen verwijzen naar de horizontale en verticale lijnen die het raster vormen in een CSS-rasterindeling. Ze specificeren de begin- en eindpunten van rijen en kolommen, waardoor ze kunnen ordenen waar dingen op het raster terechtkomen. Deze lijnen lijken op de randen van dozen; ze hebben nummers waarmee u bij het positioneren naar de elementen kunt verwijzen. Hier vertegenwoordigt de rode stippellijn ze:
  2. Rastersporen: Dit zijn de openingen tussen rasterlijnen die rijen en kolommen definiëren. Ze zijn als de bouwstenen van de rasterindeling. In de bovenstaande afbeelding vertegenwoordigt het gekleurde gebied binnen elk item het rasterspoor.

Beschouw rasterlijnen en sporen als de bouwstenen van een rasterindeling, zoals de lijnen op een vel ruitjespapier. Wanneer een horizontale rasterlijn een verticale rasterlijn snijdt, vormt deze een doosvormige cel. Deze cellen fungeren als containers waar u uw rasteritems kunt plaatsen.

Eigenschappen van CSS-rastercontainers

Dit zijn eigenschappen die u op de rastercontainer kunt toepassen om de lay-out te organiseren en te helpen bij het positioneren van elementen daarin. Zoals eerder vermeld, is een daarvan de weergave-eigenschap die is ingesteld op raster. Hier zijn er meer:

Rastersjabloon

Deze eigenschap definieert de grootte van rijen en kolommen. U kunt de grootte van deze eigenschappen aanpassen met behulp van pixels, percentages of de fractionele eenheid (fr). U kunt ook trefwoorden gebruiken zoals auto, minmax(), En herhalen() om de flexibiliteit te vergroten.

  • raster-sjabloon-rijen: Stelt rijhoogten in.
  • raster-sjabloon-kolommen: Definieert kolombreedtes.

Hier zijn 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%;
}

Met behulp van fr:

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

Gebruik auto- en minmax()-trefwoorden:

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

Repeat() gebruiken voor consistente dimensionering:

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

Automatische plaatsing en rastersjabloongebieden

Automatische plaatsing: Automatische plaatsing is hetzelfde als het raster laten beslissen waar items worden geplaatst. Als u geen exacte posities opgeeft, plaatst het raster de items automatisch in de volgorde waarin ze in de opmaak verschijnen. Dit is handig als u veel items heeft en wilt dat deze het raster gelijkmatig vullen.

Rastersjabloongebieden: Beschouw rastersjabloongebieden als het maken van een lay-out met behulp van benoemde zones. Het is alsof je kamers een naam geeft op een plattegrond. U kunt naar deze gebiedsnamen verwijzen bij het positioneren van rasteritems. Bijvoorbeeld:

.grid-container {
grid-template-areas:'headerheaderheaderheader'
 'sidebarmainmainright'
 'sidebarcontentcontentright'
 'footerfooterfooterfooter';
}

Deze lay-out lijkt op een raster met drie kolommen en vier rijen. Er zijn twee rijen voor het hoofdinhoudgebied. De gelabelde gebieden omvatten 'koptekst', 'zijbalk', 'inhoud' en 'voettekst'. In de volgende secties leert u hoe u deze gebiedslabels kunt gebruiken in de eigenschappen van elk rasteritem.

Uitlijning in CSS-raster

U kunt uitlijningseigenschappen gebruiken om de positionering van rasteritems binnen hun rastercellen te bepalen. De eigenschappen zijn:

  • rechtvaardigen-items: regelt de horizontale uitlijning van items binnen hun rastercel.
    • Waarden: begin, einde, midden en stretch.
  • uitlijnen-items: regelt de verticale uitlijning van items binnen hun rastercel.
    • Waarden: begin, einde, midden en stretch.
  • rechtvaardigen-inhoud: Lijnt het volledige raster binnen de container uit langs de horizontale as.
    • Waarden: begin, einde, midden, uitrekken, ruimte tussen, ruimte rondom en ruimte-gelijkmatig.
  • uitlijnen-inhoud: Lijnt het volledige raster binnen de container uit langs de verticale as.
    • Waarden: begin, einde, midden, uitrekken, ruimte tussen, ruimte rondom en ruimte-gelijkmatig.

Hier is een voorbeeld:

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

In dit voorbeeld worden items zowel horizontaal als verticaal in hun cellen gecentreerd. De ruimte wordt gelijkmatig verdeeld tussen de kolommen van het gehele raster en het raster wordt verticaal in de container gecentreerd.

Raster kloof

Rasteropening verwijst naar de ruimte tussen rijen en kolommen in een rasterindeling. Het helpt bij het creëren van visuele scheiding en voegt wat ruimte toe tussen rasteritems.

De raster-opening Met deze eigenschap kunt u de afstand tussen rijen en kolommen instellen. U kunt verschillende eenheden gebruiken om het te definiëren, zoals pixels (px), percentages (%), em-eenheden (em) en meer.

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

In dit voorbeeld heeft de rastercontainer twee kolommen met een tussenruimte van 20 pixels. Deze afstand scheidt de kolommen visueel en verbetert de lay-out.

Eigenschappen van CSS-rasteritems

Hier volgen enkele belangrijke eigenschappen die het gedrag van individuele rasteritems binnen een CSS-rasterindeling bepalen, samen met voorbeelden:

raster-rij-begin en raster-rij-einde:

  • Definieert de begin- en eindrijregels voor een item.
  • Waarden kunnen regelnummers, 'span n' of 'auto' zijn. 
.grid-item-1 {
grid-row-start: 2;
grid-row-end: 4;
}

Deze code plaatst Rasteritem 1 van de tweede rij naar de vierde rij.

raster-kolom-begin en raster-kolom-einde:

  • Definieert de begin- en eindkolomregels voor een item.
  • Waarden kunnen regelnummers, "span n" of "auto" zijn. 
.grid-item-2 {
grid-column-start: 1;
grid-column-end: 3;
}

Deze code plaatst Rasteritem 2 van de eerste kolomlijn tot de derde kolomlijn.

rastergebied:

  • Specificeert de grootte en positie van een rasteritem binnen het raster door te verwijzen naar de benoemde rasterlijnen in grid-sjabloon-gebieden.
  • Zoals eerder vermeld, zijn vooraf gedefinieerde gebiedsnamen al in gebruik bij de grid-sjabloon-gebieden eigendom. Hier is een voorbeeld van hoe u het samen met kunt gebruiken rastergebied. 
.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:

rechtvaardig-zelf:

  • Lijnt individuele items horizontaal uit binnen de cel.
  • Waarden kunnen begin, einde, midden en rek zijn. 
.grid-item-5 {
justify-self: center;
}

Deze code centreert horizontaal de Rasteritem 5 binnen zijn cel.

uitlijnen-zelf:

  • Lijn individuele items verticaal uit binnen de cel.
  • Waarden kunnen begin, einde, midden en rek zijn. 
.grid-item-1 {
align-self: end;
}

Deze code komt overeen Rasteritem 1 naar de bodem van zijn cel.

Voel je vrij om deze eigenschappen te combineren en aan te passen om de gewenste lay-out en look te creëren voor elk rasteritem in je CSS-raster.

Responsieve lay-outs maken met behulp van CSS-rasters

CSS-rasters gebruiken voor het maken van responsieve lay-outs Het is belangrijk om ervoor te zorgen dat uw webpagina zich naadloos aanpast aan verschillende schermformaten en apparaten. U kunt deze methoden toepassen:

  • Mediavragen: U kunt mediaquery's gebruiken om verschillende rasterindelingen toe te passen, afhankelijk van de schermgroottes. Het kan bijvoorbeeld zijn dat u rasteritems opnieuw moet rangschikken of de kolombreedte moet aanpassen voor kleinere schermen.
  • Flexibele eenheden: gebruik relatieve eenheden zoals percentages en fr om rasteritems en kolommen proportioneel aan te passen aan de beschikbare ruimte.
  • minmax(): Gebruik de minmax() functie om een ​​bereik aan formaten voor rasterkolommen of -rijen op te geven. Het zorgt ervoor dat items op verschillende schermen niet te klein of te groot verschijnen.

Vergeet niet om kolommen en andere elementen aan te passen, zoals de ruimte tussen rasteritems, lettergroottes en marges. Het zorgt voor een consistente en goed ontworpen lay-out die goed werkt op verschillende apparaten.

Ontdek de mogelijkheden van CSS-rasterindeling

Door de flexibiliteit en kracht van het CSS-raster te omarmen, kunt u lay-outs maken die er niet alleen geweldig uitzien, maar die zich ook naadloos aanpassen aan de eisen van modern webontwerp. Duik dus in de wereld van rasters, verken de mogelijkheden en verbeter uw vaardigheden op het gebied van webontwikkeling.

Terwijl u zich verdiept in lay-outsystemen, wilt u misschien andere lay-outmethoden vergelijken met CSS-rasters. Dat kan met de CSS Flexbox-module. Dit zal je helpen om te leren beslissen wanneer je aan een project werkt.