Skip to content

CSS Grid Layout Spiegbriefje

Deze pagina biedt een visueel spiegbriefje voor CSS Grid-layout, inclusief de belangrijkste eigenschappen voor grid-containers en grid-items, samen met praktische layout-voorbeelden.

Grid-container

Eigenschap Waarde Beschrijving
display grid Definieer het element als een grid-container
grid-template-columns 100px 1fr Definieer de breedte van de kolommen
grid-template-rows 100px 1fr Definieer de hoogte van de rijen
grid-template-areas header header
sidebar main
footer footer		 Definieer het grid door gebieden namen te geven
grid-column-gap 10px Definieer de ruimte tussen de kolommen
grid-row-gap 10px Definieer de ruimte tussen de rijen
grid-gap 10px 20px Definieer tegelijkertijd de ruimte tussen rijen en kolommen
justify-items start Grid-items horizontaal uitlijnen binnen hun grid-cellen
align-items start Grid-items verticaal uitlijnen binnen hun grid-cellen
justify-content start Het gehele grid horizontaal uitlijnen binnen de grid-container
align-content start Het gehele grid verticaal uitlijnen binnen de grid-container

Grid-items

Eigenschap Waarde Beschrijving
grid-column 1 / 3 Definieer de kolommen die het item beslaat
grid-row 1 / 3 Definieer de rijen die het item beslaat
grid-area header Plaats grid-items door gebieden namen te geven
justify-self start Een individueel grid-item horizontaal uitlijnen binnen zijn cel
align-self start Een individueel grid-item verticaal uitlijnen binnen zijn cel
grid-column-start 1 Definieer de startlijn van de kolom
grid-column-end 3 Definieer de eindlijn van de kolom
grid-row-start 1 Definieer de startlijn van de rij
grid-row-end 3 Definieer de eindlijn van de rij

Voorbeeld Media Query 

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Andere voorbeelden

Layout met twee kolommen 

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Layout met drie kolommen 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Verticaal centreren 

.container {
  display: grid;
  align-items: center;
}

Horizontaal centreren 

.container {
  display: grid;
  justify-items: center;
}