Skip to content

CSS Grid Layout Cheat Sheet

Denna sida ger en visuell cheat sheet för CSS Grid-layout, inklusive kärnegenskaper för grid-containrar och grid-objekt, tillsammans med praktiska layoutexempel.

Grid-container

Egenskap Värde Beskrivning
display grid Definiera elementet som en grid-container
grid-template-columns 100px 1fr Definiera bredden på kolumner
grid-template-rows 100px 1fr Definiera höjden på rader
grid-template-areas header header
sidebar main
footer footer		 Definiera rutnätet genom att namnge områden
grid-column-gap 10px Definiera utrymmet mellan kolumner
grid-row-gap 10px Definiera utrymmet mellan rader
grid-gap 10px 20px Definiera utrymme mellan rader och kolumner samtidigt
justify-items start Justera grid-objekt horisontellt inom grid-celler
align-items start Justera grid-objekt vertikalt inom grid-celler
justify-content start Justera hela rutnätet horisontellt inom grid-containern
align-content start Justera hela rutnätet vertikalt inom grid-containern

Grid-objekt (Grid Items)

Egenskap Värde Beskrivning
grid-column 1 / 3 Definiera kolumner som objektet spänner över
grid-row 1 / 3 Definiera rader som objektet spänner över
grid-area header Placera grid-objekt genom att namnge områden
justify-self start Justera ett enskilt grid-objekt horisontellt inom dess cell
align-self start Justera ett enskilt grid-objekt vertikalt inom dess cell
grid-column-start 1 Definiera kolumnens startlinje
grid-column-end 3 Definiera kolumnens slutlinje
grid-row-start 1 Definiera radens startlinje
grid-row-end 3 Definiera radens slutlinje

Exempel på Media Query 

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

Andra exempel

Tvåkolumnslayout 

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

Trekolumnslayout 

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

Vertikal centrering 

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

Horisontell centrering 

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