Skip to content

Dit is hoe je het grid van Bootstrap (of Foundation) kan vervangen met gewone vanilla CSS grids.

Notifications You must be signed in to change notification settings

CMD-Groningen/css-grid-bootstrap-alternatief

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 

Repository files navigation

CSS grid Bootstrap alternatief

Voorbeeld bestanden

Bestanden downloaden naar je laptop? Klik hier
Preview in de browser? Klik hier
Speel live met deze code in CodeSandbox > Klik hier!

Voorbeeld van hoe je het complete column grid met spans van Bootstrap (of Foundation) kunt klonen door alleen vanilla CSS grids te gebruiken! Je kunt eenvoudig je eigen rastersysteem maken door slechts een paar regels CSS-code te gebruiken. Begin met het maken van een rasterdefinitie van 12 kolommen in je CSS-bestand (het kan willekeurig elk aantal kolommen zijn dat je wilt!) 🙂

display:grid;
grid-template-columns: repeat(12,1fr);

En definieer dan de column spans voor de kolommen in je lay-outs:

header { grid-column:span 12;}
nav { grid-column: span 3;}
main { grid-column:span 9;}
footer { grid-column:span 12;}

David van den Bor
CMD Team

Docent Communicatie & Multimedia Design @ Hanzehogeschool Groningen
d.b.p.van.den.bor@pl.hanze.nl

https://github.com/CMD-Groningen
https://github.com/davidvandenbor

About

Dit is hoe je het grid van Bootstrap (of Foundation) kan vervangen met gewone vanilla CSS grids.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published