Vår senaste lab-session med CSS Grids samlade över 50 frontend-utvecklare som ville titta närmare på hur man kan använda CSS Grids och vad som skiljer mot att använda t.ex. Flexbox.

CSS Grid är två-dimensionellt och Flexbox en-dimensionellt. Det innebär utökade möjligheter då vi kan definiera layouten både vertikalt och horisontellt.

Detta görs genom att definiera bredd och/eller höjd för kolumner och rader.

I Flexbox måste vi välja om vi vill att layouten ska vara vertikal eller horisontell.

Om vi vill ha items i flex-container med olika storlek behövera vi definiera dessa individuellt per item, annars kommer de alla att ha samma bredd eller höjd.

Flexbox är dock mer lämpligt ifall du inte vet hur många items det kommer att vara i behållaren eller var i behållaren dessa kommer att existera. Eftersom vi i CSS Grid behöver definiera bredden på items i behållaren, medans flexbox definierar den direkt på item.

Engagemanget var på topp och många gick hem med nya kunskaper insatta på kontot.

Vill du ta del av materialet som hade satts ihop (bl a med inspiration från Wes Bos) har du övningar för CSS-grids i git-repot på: github.com/simptheshrimp/css-grid

Vill du vara med nästa gång vi fördjupar oss i ett ämne, anmäl dig till vår meetup-grupp på: meetup.com/front-end-lab/