TL; DR
Als u bekend bent met Flexbox, moet Grid vertrouwd aanvoelen. Rachel Andrew onderhoudt een geweldige website gewijd aan CSS Grid om u op weg te helpen. Raster is nu beschikbaar in Google Chrome.
Flexbox? Rooster?
De afgelopen jaren is CSS Flexbox op grote schaal gebruikt en browserondersteuning ziet er erg goed uit (tenzij je een van de arme zielen bent die IE9 en lager moet ondersteunen). Flexbox heeft veel complexe lay-outtaken eenvoudiger gemaakt, zoals de afstand tussen elementen op gelijke afstand, lay-outs van boven naar beneden of de heilige graal van CSS-tovenarij: verticaal centreren.
Maar helaas hebben schermen vaak een tweede dimensie waar we ons zorgen over moeten maken. Afgezien van het zelf regelen van de afmetingen van de elementen, kun je helaas niet zowel een verticaal als een horizontaal ritme hebben door alleen maar flexbox te gebruiken. Dit is waar CSS Grid te hulp komt.
CSS Grid is al meer dan 5 jaar in ontwikkeling, achter een vlag in de meeste browsers en er is extra tijd besteed aan interoperabiliteit om een lancering met fouten zoals Flexbox te voorkomen. Dus als u Grid gebruikt om uw lay-out in Chrome te implementeren, is de kans groot dat u hetzelfde resultaat krijgt in Firefox en Safari. Op het moment van schrijven is Microsoft's Edge-implementatie van Grid verouderd (dezelfde die al aanwezig was in IE11.) en wordt de update " in overweging genomen".
Ondanks de overeenkomsten in concept en syntaxis, moet u Flexbox en Grid niet beschouwen als concurrerende lay-outtechnieken. Grid is in twee dimensies gerangschikt, terwijl Flexbox in één is ingedeeld. Er is synergie als je de twee samen gebruikt.
Een raster definiëren
Om vertrouwd te raken met de individuele eigenschappen van Grid kan ik Rachel Andrew's Grid By Exemple of CSS Tricks' Cheat Sheet van harte aanbevelen. Als u bekend bent met Flexbox, zullen veel van de eigenschappen en hun betekenis bekend zijn.
Laten we eens kijken naar een standaardrasterindeling met 12 kolommen. De klassieke indeling met 12 kolommen is populair omdat het getal 12 deelbaar is door 2, 3, 4 en 6 en daarom voor veel ontwerpen bruikbaar is. Laten we deze lay-out implementeren:
Laten we beginnen met onze opmaakcode:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
In onze stylesheet beginnen we met het uitbreiden van ons body zodat het de hele viewport bedekt en er een rastercontainer van te maken:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
Nu gebruiken we CSS Grid. Hoera!
De volgende stap is het implementeren van de rijen en kolommen van ons raster. We zouden alle twaalf kolommen in onze mockup kunnen implementeren, maar omdat we niet elke kolom gebruiken, zou dit onze CSS onnodig rommelig maken. Voor de eenvoud implementeren we de lay-out op deze manier:
De kop- en voettekst zijn variabel in breedte en de inhoud is variabel in beide dimensies. De nav zal ook in beide dimensies variabel zijn, maar we gaan er een minimale breedte van 200px aan opleggen. (Waarom? Om de functies van CSS Grid te laten zien, natuurlijk.)
In CSS Grid wordt de reeks kolommen en rijen tracks genoemd. Laten we beginnen met het definiëren van onze eerste set tracks, de rijen:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows heeft een reeks formaten die de individuele rijen definiëren. In dit geval geven we de eerste rij een hoogte van 150px en de laatste van 100px. De middelste rij is ingesteld op auto , wat betekent dat deze zich aanpast aan de benodigde hoogte om de rasteritems (de kinderen van de rastercontainer ) in die rij te huisvesten. Omdat ons lichaam zich over de hele viewport uitstrekt, zal de track met de inhoud (geel in de afbeelding hierboven) in ieder geval alle beschikbare ruimte vullen, maar zal hij groeien (en het document laten scrollen) als dat nodig is.
Voor de kolommen willen we een meer dynamische aanpak hanteren: we willen dat zowel de nav als de inhoud groeien (en krimpen), maar we willen dat de nav nooit kleiner wordt dan 200px en we willen dat de inhoud groter is dan de nav. In Flexbox zouden we flex-grow en flex-shrink gebruiken, maar in Grid is het een beetje anders:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
We definiëren 2 kolommen. De eerste kolom wordt gedefinieerd met behulp van de functie minmax() , die twee waarden aanneemt: de minimale en de maximale grootte van dat spoor. (Het is als min-width en max-width in één.) De minimale breedte is, zoals we eerder hebben besproken, 200px. De maximale breedte is 3fr . fr is een rasterspecifieke eenheid waarmee u de beschikbare ruimte over de rasterelementen kunt verdelen. fr staat waarschijnlijk voor "fractie-eenheid", maar kan binnenkort ook vrije eenheid betekenen . Onze waarden hier betekenen dat beide kolommen groter worden om het scherm te vullen, maar dat de inhoudskolom altijd drie keer zo breed zal zijn als de navigatiekolom (op voorwaarde dat de navigatiekolom breder blijft dan 200 px).
Hoewel de plaatsing van onze rasteritems nog niet correct is, gedraagt de grootte van de rijen en kolommen zich correct en levert het gedrag op waar we naar streefden:
Het plaatsen van de artikelen
Een van de krachtigste functies van Grid is dat je items kunt plaatsen zonder rekening te houden met de DOM-bestelling. (Omdat schermlezers door de DOM navigeren, raden we u ten zeerste aan om, voor een goede toegankelijkheid, rekening te houden met de manier waarop u elementen herschikt.) Als er geen handmatige plaatsing plaatsvindt, worden de elementen in het raster in DOM-volgorde geplaatst, links gerangschikt rechts en van boven naar beneden. Elk element beslaat één cel . De volgorde waarin het raster wordt gevuld, kan worden gewijzigd met behulp van grid-auto-flow .
Dus, hoe plaatsen we elementen? De eenvoudigste manier om rasteritems te plaatsen is waarschijnlijk door te definiëren welke kolommen en rijen ze bestrijken. Grid biedt hiervoor twee syntaxis: In de eerste syntaxis definieert u begin- en eindpunten. In de tweede definieer je een startpunt en een overspanning:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
We willen dat onze koptekst begint in de eerste kolom en eindigt vóór de derde kolom. Onze navigatie moet op de tweede rij beginnen en in totaal twee rijen bestrijken.
Technisch gezien zijn we klaar met het implementeren van onze lay-out, maar ik wil u een paar handige functies laten zien die Grid u biedt om plaatsing eenvoudiger te maken. De eerste functie is dat u uw trackgrenzen een naam kunt geven en die namen kunt gebruiken voor plaatsing:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
De bovenstaande code levert dezelfde lay-out op als de voorgaande code.
Nog krachtiger is de mogelijkheid om hele regio's in uw raster een naam te geven:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas gebruikt een reeks door spaties gescheiden namen, waardoor de ontwikkelaar elke cel een naam kan geven. Als twee aangrenzende cellen dezelfde naam hebben, worden ze samengevoegd tot hetzelfde gebied. Op deze manier kunt u uw lay-outcode meer semantiek geven en mediaquery's intuïtiever maken. Nogmaals, deze code genereert dezelfde lay-out als voorheen.
Is er meer?
Ja, dat is zo, veel te veel om in één blogpost te behandelen. Rachel Andrew , die ook een GDE is, is een uitgenodigde expert in de CSS-werkgroep en heeft vanaf het begin met hen samengewerkt om ervoor te zorgen dat Grid het webontwerp vereenvoudigt. Ze heeft er zelfs een boek over geschreven. Haar website Grid By Exemple is een waardevolle bron om vertrouwd te raken met Grid. Veel mensen denken dat Grid een revolutionaire stap is voor webontwerp en dat het nu standaard is ingeschakeld in Chrome, zodat u het vandaag nog kunt gebruiken.