Bram ging naar CSS Day in Amsterdam en ontdekte met CSS Grid een krachtig layout-systeem
Geschreven door Bram op 06/07/2018
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.