Grid-template-columns / grid-template-rows - CSS-Tricks

Właściwości grid-template-rowsi grid-template-columnssą głównymi właściwościami CSS służącymi do tworzenia układu siatki, gdy element jest kontekstem siatki ( display: grid;).

Istnieją również -ms-grid-columnsi -ms-grid-rows, które są starą wersją tego programu w IE. Możesz rozważyć Autoprefixing, aby uzyskać lub nie uzyskać połączenia. Był tam również dziwne okres gdzie oni byli grid-definition-columnsi grid-definition-rows, ale to nie jest coś więcej.

Oto przykład zaczerpnięty z dokumentacji Microsoftu:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Określa liczbę wierszy / kolumn w siatce, a także ich wymiary.

Te dwie właściwości obsługują listę wartości oddzielonych spacjami. Każda wartość będzie definiować nową kolumnę / wiersz poprzez ustawienie wymiaru. Lista 4 wartości da w wyniku 4 kolumny / wiersze. Pojedyncza wartość da jedną kolumnę / wiersz.

Akceptowane są następujące wartości długości (jak pxi em), procenty frakcje ( frpatrz poniżej), auto(i fit-content) min-content, max-contenti minmax()lub repeat()funkcję.

W powyższym przykładzie kodu oznacza to:

Kolumna 1 ( automatyczne słowo kluczowe): Kolumna jest dopasowana do zawartości kolumny.
Kolumna 2 („100 pikseli”): kolumna ma 100 pikseli szerokości.
Kolumna 3 („1fr”): Kolumna zajmuje jedną jednostkę ułamkową pozostałej przestrzeni.
Kolumna 4 („2fr”): Kolumna zajmuje dwie części pozostałej przestrzeni.

Wiersz 1 („50 pikseli”): wiersz ma wysokość 50 pikseli.
Rząd 2 („5em”): Rząd ma 5 ems wysokości.
Wiersz 3 ( słowo kluczowe o minimalnej zawartości ): Wiersz jest tak mały, jak na to pozwala zawartość.
Wiersz 4 ( automatyczne słowo kluczowe): wiersz jest dopasowywany do treści w wierszu.

powtarzać()

repeat()Funkcja został specjalnie zaprojektowany dla tego modułu. Pozwala na zdefiniowanie wzoru powtarzanego X razy. Lubię repeat(6, 1fr);. Powiedzmy, że chcesz zrobić 12 równych kolumn oddalonych od siebie o 1% marginesu; możesz zdefiniować 1fr repeat(11, 1% 1fr). To jest to samo co 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

Jednostka fr

frUrządzenie może być wykorzystywane do grid-rowsi grid-columnswartości. Oznacza „ułamek dostępnej przestrzeni”. Potraktuj to jako procenty dostępnego miejsca, gdy usuniesz kolumny / wiersze o stałym rozmiarze i oparte na zawartości. Jak mówi specyfikacja:

Rozkład przestrzeni ułamkowej następuje po osiągnięciu maksymalnego rozmiaru wszystkich wierszy i kolumn opartych na długości lub zawartości.

Związane z

Naszym najlepszym źródłem informacji o siatkach CSS jest nasz Kompletny przewodnik po siatce CSS.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.