It has been fascinating to see how people have adopted Grid, and the different ways people are developing with the specification. It has also been interesting to me to discover the things people want to do, suggestions for future levels of the Grid specification; or perhaps that point to other types of layout entirely being required.
— Rachel Andrew

CSS grid

Learn CSS grid the easy way

In maart 2017 gebeurde iets speciaals. Op amper enkele weken tijd, implementeerden Chrome, Safari, Firefox, Opera en Edge CSS grid. Dat was groot nieuws in de frontend community. Designers zijn namelijk opgeleid om met rasters te werken. Alleen ondersteunde CSS geen raster en moest je je toevlucht zoeken tot ontwerpen met floats, of gebruik maken van CSS frameworks zoals Bootstrap.

CSS-tricks heeft (net zoals voor flex) ook voor grid een mooi visueel overzicht. De linkerkolom beschrijft de eigenschappen voor de grid-parent, de rechterkolom voor de grid-kinderen.

Ook over grid heeft Kevin Powell vanalles te vertellen. Op 37 minuten krijg je een goed overzicht van enkele mogelijkheden van grid.

Waarvoor grid gebruiken?

De site die je nu bekijkt gebruikt o.a. grid voor de navigatie met de foto's waarop een woord staat (HTML, CSS, JS).

Er is veel kans dat display: grid voor je site nuttig is om op grote schermen dingen in rijen en kolommen te lay-outen. Mogen we waarschuwen voor de grootste valkuil? Vaak zien we dat studenten elk blokje in een grid op een unieke plaats willen zetten door rij- en kolomnummers te geven aan elk element. Maar zoals Kevin Powell in zijn uitleg verschillende keren benadrukt: Keep It Simple! Probeer zo weinig mogelijk af te wijken van de normale manier waarop blokjes in je grid een plaats krijgen.