Leer snel CSS3 Grid Layout Module in 2 uur video demonstraties. Je leert hoe je een Grid container maakt, zodat alle Grid layout eigenschappen tot je beschikking komen. Daarna duiken we in de eigenschappen van de container voor het positioneren van de container en haar kinderen, de grid items. Al heel snel maak je zelf een layout.
We gaan alle eigenschappen van Grid containers en grid items bekijken. Grid heeft verschillende manieren waarop je ermee kunt werken, wat het heel flexibel maakt.
CSS Grid is in tegenstelling tot Flexbox een twee-dimensioneel systeem, je kunt dus tegelijkertijd horizontaal en vertikaal werken om daarmee kolommen en rijen te maken om je website vorm te geven. Grid is echt bedoeld om pagina cq website layouts te maken, je kunt vrij eenvoudig elk soort layout maken, zolang de vlakken maar rechthoekig blijven. Het verschil met Flexbox is, dat deze laatste vooral is bedoeld om een aantal elementen in een richting uit te lijnen over de beschikbare ruimte.
Voorkennis
Voor deze cursus is het noodzakelijk dat je kennis hebt van HTML en CSS. Indien je dat niet hebt, kun je mijn cursussen HTML en/of CSS eerst volgen.
Deze cursus CSS is de vierde in een reeks van vier waarin je van absolute beginner tot expert gaat. Je begint met HTML, dan CSS, en daarna CSS Flexbox en CSS Grid. Met deze laatste twee nieuwe CSS3 modules kun je elke soort lay-out maken, en behoren de beperkingen die webdesign tot een paar jaar geleden had, definitief tot het verleden.
Echter, deze cursus vormt een afgerond geheel en kan ook afzonderlijk worden gevolgd.
Praktijk
Naast de lessen waar je kunt zien hoe CSS Grid werkt, zijn er een aantal praktijkvideo's die je laten zien hoe je bepaalde zaken snel kunt maken. Zo maken we een layout met een kolom en een layout met twee kolommen, en bouwen we een systeem met 12 kolommen waarmee je elk soort layout snel kunt maken. Dit is een herbruikbaar systeem dat je op HTML pagina's kunt toepassen.
Tenslotte zien we nog hoe je in 20 minuten een op tabellen gebaseerde layout omzet in CSS Grid. Dit gebeurt door middel van de functie "auto-flow", waarbij CSS Grid zelf de elementen op d emeest passende plaats gaat zetten. Ideaal voor mosaic layouts, waarin allerlei cards met verschillende lengtes en breedtes naast en onder elkaar staan.
