Własność CSS grid-template

Własność CSS grid-template to własność zbiorcza służąca do definiowania kolumn, wierszy i obszarów siatki CSS Grid. Obejmuje następujące własności indywidualne:

• grid-template-columns
• grid-template-rows
• grid-template-areas

Wartości i składnia

Własność grid-template przyjmuje następujące wartości:

Słowo kluczowe none

Ustawia wartości wszystkich własności indywidualnych na none, co oznacza, że w ogóle nie tworzy siatki jawnej.

grid-template-rows / grid-template-columns

Ustawia wartości własności grid-template-rows i grid-template-columns, rozdzielając je ukośnikiem, np.:

grid-template: 10px 20px / 30px 40px;

Ta deklaracja jest równoważna z poniższymi dwiema:

grid-template-rows: 10px 20px;
grid-template-columns: 30px 40px;

[nazwy-linii-początkowej-wiersza] "definicja obszaru" rozmiar-ścieżki [nazwy-linii-końcowej wiersza] [nazwy-linii-początkowej-wiersza] "definicja obszaru" rozmiar-ścieżki [nazwy-linii-końcowej wiersza] / [nazwy-pierwszej-linii-kolumny] rozmiar ścieżki [nazwy-linii-drugiej-kolumny] rozmiar ścieżki

Ta składnia, choć na pierwszy rzut oka wydaje się skomplikowana, w rzeczywistości jest bardzo prosta. Obejmuje dowolną liczbę „pełnych” definicji wierszy siatki, po których następuje definicja kolumn oddzielona od nich ukośnikiem, np.:

grid-template:
  [ng-góra] "ng ng ng" 100px [ng-dół]
  [śr-góra] "śr śr śr" 200px [śr-dół]
  [st-góra] "st st st" 100px [st-dół]
  / [linia1] 200px [linia2] 400px [linia3] 200px [linia4];
}

Ta deklaracja jest równoznaczna z poniższymi:

grid-template-rows: [ng-góra] 100px [ng-dół śr-góra] 200px [śr-dół st-góra] 100px [st-dół];
grid-template-columns: [linia1] 200px [linia2] 400px [linia3] 200px [linia4];
grid-template-areas: "ng ng ng"
                     "śr śr śr"
                     "st st st";

Deklaracje te tworzą siatkę składającą się z trzech wierszy i trzech kolumn. Pierwszy i trzeci wiersz mają po 100 pikseli wysokości, a drugi — 200. Każda linia tworząca wiersze ma określoną nazwę jawną, a niektóre z nich mają po dwie nazwy.

Jeśli chodzi o kolumny, to pierwsza i ostatnia mają po 200 pikseli szerokości, a środkowa ma 400. W tym przypadków również wszystkie linie mają nadane nazwy jawne. Opisywana siatka wygląda tak:

Podsumowanie