Skip to content

Arkusz skrótów układu CSS Grid

Ta strona zawiera wizualny arkusz skrótów układu CSS Grid, w tym kluczowe właściwości dla kontenerów siatki i elementów siatki, wraz z praktycznymi przykładami układów.

Kontener siatki (Grid Container)

Właściwość Wartość Opis
display grid Definiuje element jako kontener siatki
grid-template-columns 100px 1fr Definiuje szerokość kolumn
grid-template-rows 100px 1fr Definiuje wysokość wierszy
grid-template-areas header header
sidebar main
footer footer		 Definiuje siatkę poprzez nazywanie obszarów
grid-column-gap 10px Definiuje odstęp między kolumnami
grid-row-gap 10px Definiuje odstęp między wierszami
grid-gap 10px 20px Definiuje jednocześnie odstępy między wierszami i kolumnami
justify-items start Wyrównuje elementy siatki poziomo wewnątrz komórek siatki
align-items start Wyrównuje elementy siatki pionowo wewnątrz komórek siatki
justify-content start Wyrównuje całą siatkę poziomo wewnątrz kontenera siatki
align-content start Wyrównuje całą siatkę pionowo wewnątrz kontenera siatki

Elementy siatki (Grid Items)

Właściwość Wartość Opis
grid-column 1 / 3 Definiuje kolumny, które zajmuje element
grid-row 1 / 3 Definiuje wiersze, które zajmuje element
grid-area header Umieszcza elementy siatki poprzez nazywanie obszarów
justify-self start Wyrównuje pojedynczy element siatki poziomo wewnątrz jego komórki
align-self start Wyrównuje pojedynczy element siatki pionowo wewnątrz jego komórki
grid-column-start 1 Definiuje linię początkową kolumny
grid-column-end 3 Definiuje linię końcową kolumny
grid-row-start 1 Definiuje linię początkową wiersza
grid-row-end 3 Definiuje linię końcową wiersza

Przykład Media Query 

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

Inne przykłady

Układ dwukolumnowy 

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

Układ trzykolumnowy 

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

Centrowanie w pionie 

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

Centrowanie w poziomie 

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