CSS-raster – Tabelindeling is terug. Wees erbij en wees vierkant

Kortom

Als je Flexbox al kent, zal Grid je vast bekend voorkomen. Rachel Andrew heeft een geweldige website gewijd aan CSS Grid om je op weg te helpen. Grid is nu beschikbaar in Google Chrome.

Flexbox? Raster?

De afgelopen jaren is CSS Flexbox wijdverbreid gebruikt en de browserondersteuning ziet er erg goed uit (tenzij je tot de arme zielen behoort die IE9 en lager moeten ondersteunen). Flexbox heeft veel complexe lay-outtaken eenvoudiger gemaakt, zoals het plaatsen van gelijke afstanden tussen elementen, lay-outs van boven naar beneden of de heilige graal van CSS-tovenarij: verticaal centreren.

Er is geen manier om elementen over meerdere flexbox-containers uit te lijnen.

Maar helaas hebben schermen vaak een tweede dimensie waar we rekening mee moeten houden. Behalve als je zelf de elementen moet dimensioneren, kun je helaas niet zowel een verticaal als horizontaal ritme creëren met alleen flexbox. CSS Grid biedt hierbij uitkomst.

CSS Grid is al meer dan vijf jaar in ontwikkeling, achter een vlag in de meeste browsers, en er is extra tijd besteed aan interoperabiliteit om een ​​buggy lancering zoals bij Flexbox te voorkomen. Dus als je Grid gebruikt om je lay-out in Chrome te implementeren, is de kans groot dat je hetzelfde resultaat krijgt in Firefox en Safari. Op het moment van schrijven is de Edge-implementatie van Grid door Microsoft verouderd (dezelfde als die al aanwezig was in IE11) en wordt de update " overwogen ".

Ondanks de overeenkomsten in concept en syntaxis, beschouw Flexbox en Grid niet als concurrerende lay-outtechnieken. Grid ordent in twee dimensies, terwijl Flexbox in één dimensie lay-out. Er is synergie wanneer beide samen worden gebruikt.

Een raster definiëren

Om vertrouwd te raken met de individuele eigenschappen van Grid raad ik Rachel Andrews Grid By Example of CSS Tricks' Cheat Sheet van harte aan. Als je bekend bent met Flexbox, zullen veel van de eigenschappen en hun betekenis je bekend voorkomen.

Laten we eens kijken naar een standaard raster met 12 kolommen. De klassieke lay-out met 12 kolommen is populair omdat het getal 12 deelbaar is door 2, 3, 4 en 6, en daarom bruikbaar is voor veel ontwerpen. Laten we deze lay-out implementeren:

Er is geen manier om elementen over meerdere flexbox-containers uit te lijnen.

Laten we beginnen met onze markup-code:

<!DOCTYPE html>
<body>
    <header></header>
    <nav></nav>
    <main></main>
    <footer></footer>
</body>

In ons stylesheet beginnen we met het uitbreiden van de body , zodat deze de gehele viewport beslaat en deze om te zetten in een rastercontainer :

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 12 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 als volgt:

Vereenvoudigd lay-outvoorbeeld

De header en footer zijn variabel in breedte en de content is variabel in beide dimensies. De navigatie zal ook variabel zijn in beide dimensies, maar we hanteren een minimale breedte van 200 px. (Waarom? Om de mogelijkheden van CSS Grid te demonstreren, natuurlijk.)

In CSS Grid worden de 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 gebruikt een reeks formaten die de afzonderlijke rijen definiëren. In dit geval geven we de eerste rij een hoogte van 150 px en de laatste van 100 px. De middelste rij is ingesteld op auto wat betekent dat deze zich aanpast aan de benodigde hoogte om de rasteritems (de onderliggende elementen van de rastercontainer ) in die rij te kunnen plaatsen. Omdat onze body over de gehele viewport is uitgerekt, vult het spoor met de content (geel in de afbeelding hierboven) in ieder geval alle beschikbare ruimte, maar groeit het (en zorgt het ervoor dat het document scrollt) indien nodig.

Voor de kolommen willen we een dynamischere aanpak: we willen dat zowel de navigatie als de inhoud groeit (en krimpt), maar we willen dat de navigatie nooit kleiner wordt dan 200 px en dat de inhoud groter is dan de navigatie. In Flexbox zouden we flex-grow en flex-shrink gebruiken, maar in Grid werkt het iets anders:

body {
    display: grid;
    grid-template-rows: 150px auto 100px;
    grid-template-columns: minmax(200px, 3fr) 9fr;
}

We definiëren twee kolommen. De eerste kolom wordt gedefinieerd met de minmax() functie, die twee waarden aanneemt: de minimale en maximale grootte van dat spoor. (Het is als min-width en max-width in één.) De minimale breedte is, zoals we eerder bespraken, 200 px. De maximale breedte is 3fr . fr is een rasterspecifieke eenheid waarmee je de beschikbare ruimte over de rasterelementen kunt verdelen. fr staat waarschijnlijk voor "fraction unit", maar kan ook "free unit soon" betekenen . Onze waarden hier betekenen dat beide kolommen zullen groeien om het scherm te vullen, maar dat de inhoudskolom altijd drie keer zo breed zal zijn als de navigatiekolom (mits de navigatiekolom breder blijft dan 200 px).

Hoewel de plaatsing van onze rasteritems nog niet correct is, functioneert de grootte van de rijen en kolommen correct en levert het het gewenste gedrag op:

De items plaatsen

Een van de krachtigste functies van Grid is de mogelijkheid om items te plaatsen zonder rekening te houden met de DOM-volgorde. (Omdat schermlezers door de DOM navigeren, raden we u echter ten zeerste aan om goed op te letten bij het herschikken van elementen, zodat u goed toegankelijk bent.) Als er geen handmatige plaatsing plaatsvindt, worden de elementen in de Grid geplaatst in DOM-volgorde, van links naar rechts en van boven naar beneden. Elk element beslaat één cel . De volgorde waarin de Grid wordt gevuld, kan worden gewijzigd met grid-auto-flow .

Dus, hoe plaatsen we elementen? De makkelijkste manier om rasteritems te plaatsen is door te definiëren welke kolommen en rijen ze bedekken. Grid biedt hiervoor twee syntaxismogelijkheden: in de eerste syntaxis definieer je start- en eindpunten. In de tweede definieer je een startpunt en een span:

header {
    grid-column: 1 / 3;
}
nav {
    grid-row: 2 / span 2;
}
Handmatige plaatsing

We willen dat onze header in de eerste kolom begint en eindigt vóór de derde kolom. Onze navigatie moet in de tweede rij beginnen en in totaal twee rijen beslaan.

Technisch gezien zijn we klaar met het implementeren van onze lay-out, maar ik wil je graag een paar handige functies laten zien die Grid biedt om plaatsing te vereenvoudigen. De eerste functie is dat je de randen van je tracks een naam kunt geven en die namen kunt gebruiken voor de 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 vorige code.

Nog krachtiger is de functie 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, zodat 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. Ook deze code genereert dezelfde lay-out als voorheen.

Is er nog meer?

Ja, ja, die is er, veel te veel om in één blogpost te behandelen. Rachel Andrew , tevens GDE , is een uitgenodigde expert in de CSS Working Group en werkt al vanaf het begin met hen samen om ervoor te zorgen dat Grid webdesign vereenvoudigt. Ze heeft er zelfs een boek over geschreven. Haar website Grid By Example is een waardevolle bron om vertrouwd te raken met Grid. Veel mensen beschouwen Grid als een revolutionaire stap voor webdesign en het is nu standaard ingeschakeld in Chrome, dus je kunt er vandaag nog mee aan de slag.