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
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 gelijke kolommen */
  grid-template-rows: auto auto;          /* 2 automatic rijen */
  gap: 20px;
}

.grid-item {
  background: lightblue;
  padding: 20px;
}

/* Responsive: 1 kolom op mobile */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

Relevante trefwoorden

gridlayout2Dresponsive

Gerelateerde Vragen

← Terug naar CSS & StylingAlle categorieën →