CSS & Styling

Wat is CSS Grid en hoe verschilt het van Flexbox?

Grid is een 2-dimensionaal layout systeem. Flexbox is 1-dimensionaal.

Home/Categorieën/CSS & Styling/Wat is CSS Grid en hoe verschilt het van Flexbox?

Grid vs Flexbox

Flexbox: ideaal voor lineaire layouts (navigatie, button groups) Grid: ideaal voor 2D layouts (pagina structuur, dashboards)

Grid basis

display: grid maakt element grid container grid-template-columns: aantal en grootte kolommen grid-template-rows: aantal en grootte rijen gap: ruimte tussen items

Code Voorbeelden

CSSBasis Grid layout✏️ Interactief
✏️CODE AANPASSEN
LIVE PREVIEW

Relevante trefwoorden

gridlayout2Dresponsive