grid-template-columns - ustalenie ilości kolumn oraz ich szerokości np. 100px 200px; tworzy dwie kolumny pierwszą w szerokości 100px a drugą szerokości 200px.
grid-template-rows - ustalenie ilości wierszy oraz ich wysokości.
fr - jednostka która dzieli dostępną wielkość. np. grid-template-columns: 1fr 2fr 1fr; stworzy 3 kolumny z czego środkowa będzie 2 razy większa od pozostałych.
grid-auto-rows - ustalanie automatycznej wielkości dla kolejnych wierszy które nie zostały wcześniej ustalone.
grid-auto-columns - ustalanie automatycznej wielkości dla kolejnych kolumn które nie zostały wcześniej ustalone.
gap - luka/przerwa pomiędzy elementami
row-gap - luka/przerwa pomiędzy wierszami
column-gap - luka/przerwa pomiędzy kolumnami
grid-template-areas - ustawianie elementów za pomocą nazw elementów. np.
grid-template-areas:
"header header header"
"nav article aside"
"footer footer footer";
należy pamiętać że ilość elementów w kolumnach lub wierszach musi być taka sama.
grid-area: ; - nazwa elementów w siatce. np:
grid-area:header;
