Inleiding tot de CSS-rasterlay-out met voorbeelden

Wat je gaat creëren

In deze zelfstudie zal ik de basisprincipes van de CSS-rasterlay-out behandelen met voorbeeldscenario's. CSS Grid wordt nu door bijna alle moderne browsers ondersteund en is klaar om in productie te worden gebruikt. In tegenstelling tot andere opmaakmethoden zoals flexbox, geeft de rasterlay-out u twee vrijheidsgraden, waardoor het zo veelzijdig is dat het plaatsen van de elementen slechts een briesje is.

HTML-structuur voor de CSS-rasterlay-out

Als u de CSS-rasterlay-out wilt gebruiken, moeten uw HTML-elementen een specifieke structuur hebben.

U moet de elementen wikkelen die u wilt beheren in een bovenliggende container DIV.

Laten we wat styling toevoegen voor onze DIV's, zodat we ze gemakkelijk kunnen onderscheiden.

Stel ook de weergeven: raster in uw wikkel DIV zodat we de rasterlay-out kunnen gebruiken.

.wrapper> div achtergrondkleur: oranje; rand: 1px zwarte vaste stof;  .wrapper> div: nth-child (oneven) background-color: indianred;  .wrapper weergeven: raster

Vanaf dit punt zal alle styling in de wikkel DIV. Als we ooit de DIV's van het kind willen controleren, dan zullen we rasterspecifieke stijlregels voor het specifieke kind toevoegen DIV.

Regels voor bovenliggende DIV

De eerste dingen die we moeten leren over de lay-out van het raster zijn roostervormige template-columns en roostervormige template-rijen. Die twee regels bepalen in feite hoe uw raster wordt gevormd.

De waarde van deze regels kan een lengte, een percentage of een fractie van de vrije ruimte in het raster zijn. U kunt ook elke waarde instellen op auto, die de resterende ruimte opvult.

Laten we enkele voorbeelden hieronder bekijken.

Raster-sjabloon-kolommen & Raster-sjabloon-rijen

roostervormige template-columns

.wrapper weergave: raster; rooster-sjabloon-kolommen: 100px 100px 100px

.wrapper weergave: raster; rooster-sjabloon-kolommen: 100px auto 100px

.wrapper weergave: raster; rooster-sjabloon-kolommen: 1fr 1fr 1fr 1fr;

rooster-sjabloon-kolommen & rooster-sjabloon-rijen

Laten we beginnen met het bouwen van een echt raster, waarin we controle hebben over beide kolommen en rijen.

.wrapper weergave: raster; rooster-sjabloon-kolommen: 1fr 1fr; rooster-sjabloon-rijen: 50px 50px;

.wrapper weergave: raster; rooster-sjabloon-kolommen: 100px 20px 250px; rooster-sjabloon-rijen: 150px 40px;

Hier heb ik zojuist nog twee onderliggende DIV's aan de HTML toegevoegd voor dezelfde CSS.

Herhaal een rastersjabloonpatroon

Als je een herhalend patroon hebt voor roostervormige template,je kunt gewoon herhalen gebruiken en vertellen hoe vaak je hetzelfde patroon herhaalt.

Stel bijvoorbeeld dat u twaalf elementen hebt en dat u ze horizontaal met gelijke breedte wilt neerleggen. Je zou kunnen herhalen 1FR 12 keer binnen roostervormige template-columns, wat niet effectief is. Dus in plaats daarvan kunt u gebruiken herhaal (12, 1fr).

.wrapper weergave: raster; rooster-sjabloon-kolommen: herhaling (12, 1fr)

Evenzo kunt u een patroon herhalen.

.wrapper weergave: raster; rooster-sjabloon-kolommen: herhaling (4, 1fr 5fr 10fr);

Grid-autokolommen & Grid-auto-rijen

Met deze regel kunt u de breedte en hoogte van rastercellen instellen.

Als u deze regel niet instelt, worden uw rasterrijen en kolommen uitgebreid met de inhoud.

.wrapper weergave: raster; rooster-sjabloon-kolommen: herhaling (4, 1fr); grid-auto-rijen: 100px;

.wrapper weergave: raster; rooster-sjabloon-kolommen: herhaling (4, 1fr); grid-auto-rijen: 20px 80px;

Een leuke functie om mee te gebruiken raster-auto regel is het MinMax functie.

U stelt eenvoudig de minimale grootte in als de eerste parameter en de maximum als de tweede parameter. Als je instelt auto voor de tweede parameter krijgt u een responsieve celgrootte.

.wrapper weergave: raster; rooster-sjabloon-kolommen: herhaling (4, 1fr); grid-auto-rijen: minmax (50px, auto)

Hieronder ziet u twee verschillende DIV-inhoud met dezelfde CSS-regels.

Grid-gap

Zoals de naam aangeeft, creëert deze regel een gat tussen rastercellen.

Als je gebruikt rooster-opening: 5px, je krijgt een 5px gat tussen elke cel. Als alternatief kunt u alleen de rij- of kolomhiaten instellen met grid-row-gap: 5px en rooster-kolom-opening: 5px respectievelijk.

.wrapper weergave: raster; rooster-sjabloon-kolommen: herhaling (4, 1fr); grid-auto-rijen: minmax (50px, auto); grid-gap: 5px;

Regels voor kind-DIV's

Tot nu toe hebben we ons alleen gericht op de vorm van het raster en items zijn net in het raster gestroomd. Nu zullen we leren om elk item afzonderlijk te besturen.

Om de artikelen te positioneren, gebruiken we rasterlijnen als referentie. Hieronder ziet u de rij- en kolomlijnen in respectievelijk zwart en oranje voor een 2x4 raster.

We zullen de gebruiken roostervormige kolom en roostervormige rij regels met regelnummers om de elementen te positioneren.

Bijvoorbeeld als we instellen rasterkolom: 1/3 voor de eerste onderliggende div gebruikt hij de eerste twee cellen in het raster.

Overweeg de HTML en CSS hieronder:

.wrapper weergave: raster; rooster-sjabloon-kolommen: herhaling (4, 1fr); grid-auto-rijen: 100px; grid-gap: 5px;

We hebben vier even grote kolommen en acht elementen in de wikkel DIV.

 .div1 rasterkolom: 1/3;

 .div1 rasterkolom: 1/3; rasterrij: 1/3;

U kunt deze twee regels ook combineren in één regel, raster: rowStart / columnStart / rowEnd / columnEnd.

 .div1 grid-area: 2/2/3/4;

Zoals geïllustreerd in het bovenstaande voorbeeld, zijn elementen niet gebonden aan de HTML-structuur. Let op hoe het eerste element wordt verplaatst met de roostervormige area regel.

Grid-area & grid-template-areas

U kunt elk onderliggende element een naam geven en deze namen gebruiken om uw raster te maken. Dit is echt krachtig en het maakt het lay-out intuïtiever.

Daarom definiëren we een DIV voor elk element dat we in ons rastersysteem willen plaatsen.

Ik ben van plan om een header, leftColumn, rightColumn, middleTop, middleBottom en een footer te hebben.

Dus in mijn HTML heb ik dat veel onderliggende DIV's nodig. De klassenamen kunnen van alles zijn.

 hoofd
 LeftCol
 RightCol
 midTop
 midBottom
 footer

Vervolgens heb ik in mijn CSS de roostervormige area namen. Die namen kunnen van alles zijn; ze mogen de klassenamen niet evenaren.

.header grid-area: header; achtergrondkleur: LightSeaGreen;  .leftCol grid-area: leftCol; achtergrondkleur: oranje;  .rechtCol grid-area: rightCol; achtergrondkleur: lichtblauw;  .midTop grid-area: midTop; achtergrondkleur: lichtgrijs;  .midBasis grid-area: midBottom; achtergrondkleur: roze;  .footer grid-area: footer; achtergrondkleur: lichtgroen;

Vervolgens in mijn wikkel DIV, ik gebruik de roostervormige template-gebieden regel om die elementen op te maken door te verwijzen naar hun gedefinieerde namen.

Merk op dat ik een 4x4-raster heb.

.wrapper weergave: raster; rooster-sjabloon-kolommen: 1fr 4fr 4fr 1fr; rooster-sjabloon-rijen: 50px 100px 100px 30px; grid-template-gebieden: "header header header header" "leftCol midTop midTop rightCol" "leftCol midBedrongemiddeldBottom rightCol" "voettekst voettekst voettekst"; grid-gap: 5px;

Als ik bijvoorbeeld wil dat de voettekst slechts twee kolommen neemt en gecentreerd is, vervang ik eenvoudig het eerste en het laatste uiterlijk van footer met een punt (.) in roostervormige template-gebieden.

.wrapper weergave: raster; rooster-sjabloon-kolommen: 1fr 4fr 4fr 1fr; rooster-sjabloon-rijen: 50px 100px 100px 30px; rooster-sjabloon-gebieden: "header header header header" "leftCol midTop midTop rightCol" "leftCol midBottom midBottom rightCol" ". footer footer."; grid-gap: 5px;

Conclusie

CSS Grid heeft heel veel regels, en ik heb alleen de nuttigste behandeld in deze tutorial. U kunt nog steeds in MDN Web Docs of andere bronnen graven voor de volledige lijst met rastereigenschappen en -functies.

Code