CSS Grid

Voluit: CSS Grid Layout Module, is een manier om voor elke soort webpagina layout snel en accuraat een layout te maken. Niet alleen is het mogelijk elke layout te maken, het kan ook snel, eenvoudig, pixelprecies en al met aardig wat responsiveness ook.

Snel en makkelijk

Jaaa…. maar je moet wel even weten hoe het werkt. CSS Grid is een compleet nieuwe manier van werken, en ook uitgebreider en daarmee complexer dan de andere CSS Layout Module, Flexbox. Maar daar staat dan ook tegenover, dat je met CSS Grid layouts kunt maken in twee dimensies tegelijk, dus zowel horizontaal als vertikaal.

Je deelt je scherm “simpelweg” in in een grid van horizontaal en verticaal gerangschikte vakken. De enige restrictie is, dat een vak een aaneensluitend rechthoekig gebied moet zijn.

Laat dat maar eens zien

De HTML voor een site met twee kolommen:

<body>
   <header></header>
   <nav></nav>
   <article></article>
   <aside></aside>
   <footer></footer>
</body>

De CSS

body{
   display:grid;
   min-height:100vh;
   grid-template: 100px 1fr 100px / 100px 1fr 100px;
}

header, footer {
   grid-column: 1 / 4;
}

Bekijk de complete code en het resultaat op Codepen

In de cursus maak je al in de derde video je eerste layout. In 28 video’s leer je alles over de verschillende manieren om supersnel CSS layouts te maken.

Plaats een bericht

  • (wordt hier niet vertoond)


× drie = 24