Ska jag använda Flexbox eller CSS Grid?
Flexbox och CSS Grid är två metoder för att bygga upp en layout med CSS. De jämförs ofta med varandra, trots att det är ganska stor skillnad mellan Flexbox och CSS Grid. I det här inlägget delar jag med mig av fördelar och nackdelar med de båda metoderna.
För- och nackdelar med Flexbox
- Flexbox är bra för att strukturera innehållet (rubriker, stycken, länkar m.m.) i olika element (containers, sidhuvud, brödtext, m.m.)
- Bra för endimensionella element, det vill säga element som ska riktas åt ett håll. Flexbox bör användas om man vill skapa element som antingen är på en rad eller i en kolumn.
- Flexbox är inte det bästa valet för tvådimensionella element.
- Med Flexbox skriver man mindre kod än med CSS Grid.
För- och nackdelar med CSS Grid
- Stöd i färre webbläsare jämfört med Flexbox. Det här kommer att ändras, och snart kommer de flesta webbläsare ha stöd för CSS Grid. Orsaken till detta är helt enkelt för att Flexbox har funnits längre.
- Bra för att strukturera layouten på element på en sida.
- Bra för tvådimensionella element. CSS Grid bör användas om man vill skapa element som är både en rad och en kolumn. Mindre bra för endimensionella element.
CSS Grid kan vara förvirrande på grund av dess tvådimensionalitet som du kan påverka med CSS-egenskaperna grid-column och grid-row. Jag brukar tänka så här:
- grid-column = bredden på en grid
- grid-row = längden på en grid
Svar: Använd både Flexbox och CSS Grid
Flexbox och CSS Grid har alltså två olika användningsområden och CSS Grid ska inte ses som en ersättare till Flexbox. Jag tycker tvärt om att det är bra att använda Flexbox och CSS Grid tillsammans. Så i valet mellan Flexbox eller CSS Grid så väljer jag helt enkelt båda två. På Hackernoon finns en bra artikel om du vill läsa mer om Flexbox och CSS Grid.
