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.
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