CSS Grid Layout

Leer elk soort webpagina layout te maken met CSS3 Grid Layout Module

Ratings 5.00 / 5.00

What You Will Learn!

CSS Grid maken
Kolommen en rijen maken
Grid responsive maken
Werken met lijnnamen en gebiedsnamen
Grid gap, korte notatie
De repeat functie gebruiken
Min-max voor flexibele items
Auto rows en kolommen
Auto flow en auto fit
Uitlijnen van items
Responsive sites met een, twee of meer kolommen maken
Een 12-koloms grid maken en hier sites mee maken

Description

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.