Bram ging naar CSS Day in Amsterdam en ontdekte met CSS Grid een krachtig layout-systeem

Bram trok in juni naar CSS Day in Amsterdam. Als webdesigner verdiept hij zich steeds meer in frontend om beter en efficiënter te designen met het oog op technische haalbaarheid en usability. CSS Day had alles te bieden om inspiratie op te doen en technieken aan te leren die Bram direct zou kunnen inzetten.

• Dag 1: Een UX-special
• Dag 2: Focus op CSS

Bram vertelt je graag meer over de inspiratie die hij meebracht uit Amsterdam.

Een indrukwekkend layout-systeem voor grids

Op dag 2 gaf Hidde De Vries een interessante talk over CSS Grid Layout, een krachtig layout-systeem waarmee je elke rij en kolom in een grid kan manipuleren. Die techniek maakte zoveel indruk op me, dat ik besloot om die meteen toe te passen op onze nieuwe Newance-website (die momenteel nog in ontwikkeling is).

Hieronder toon ik stap voor stap de kracht van CSS Grid Layout aan.

De CSS Grid Layout in actie

Op de blogpagina van onze nieuwe site wordt bovenaan een grid van 5 items getoond:

Elk item is een div met een eigen class. De container div bevat onderstaande CSS.

Met de property grid-template-columns definieer ik dat er 3 kolommen zijn. Dat doe ik aan de hand van de eenheid fr. Dat staat voor fractional unit of 'beschikbare ruimte'. 1fr is dus 1 deel van de beschikbare ruimte. 2fr 1fr 1fr komt dus overeen met 50% 25% 25%.

Met de property grid-template-rows bepaal ik dat er 3 rijen zijn. Zo krijg ik onderstaande grid als resultaat:

De plaats bepalen van elk item

Ik bepaald de plaars van elke item op de grid aan de hand van property grid-area. De div met het blogbericht met de afbeelding van Kanye West krijgt onderstaande CSS:

Deze div start in rij 1 en kolom 1. Hij eindigt in rij 3 en kolom 1. Als ik span toevoeg, definieer ik over hoeveel kolommen deze div getoond wordt.

Voor de div met het blogbericht over de Warmathon is dat dan:

CSS Grid Layout op een kleinere resolutie

Op een kleinere resolutie ziet de grid er iets anders uit:

Dat resultaat realiseer ik met enkele kleine aanpassingen:

Er zijn nu maar 2 kolommen en 3 rijen.

Bij de div met het blogbericht met de foto van Kanye West ziet de CSS er zo uit:

Deze div start in nu in rij 1 en kolom 1. Hij eindigt in rij 1 en kolom 2.

Meer leren over CSS Grid? Via deze handige website leer je al spelenderwijs met de grid werken.