Właściwość grid-template-columns
Właściwość grid-template-columns określa
liczbę i szerokość kolumn, które
element będzie zajmował w siatce.
Właściwość jest określana w elemencie nadrzędnym
i definiuje szerokość kolumn elementów potomnych.
W wartości właściwości podajemy szerokość kolumn
w dowolnych jednostkach
rozmiaru.
Przy określaniu wartości we właściwościach w pikselach
rozmiary kolumn będą dokładnie im odpowiadać.
Jeśli podamy słowo auto, kolumny będą
wypełniać całą dostępną przestrzeń. Użycie
jednostki fr (frakcja) oznacza,
że cała przestrzeń zostanie podzielona
na równe części. Zaletą
fr jest jej adaptacyjność do
różnych kontenerów lub rozdzielczości ekranu,
ponieważ fr po prostu dzieli je na określoną
liczbę frakcji bez powiązania z dokładnym rozmiarem w pikselach.
Składnia
selektor {
grid-template-columns: szerokość kolumny;
}
Przykład
Ustawmy szerokość kolumn dla naszych elementów w siatce:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Ustawmy pierwszej i trzeciej kolumnie stałą szerokość w pikselach, a druga kolumna niech automatycznie wypełni dostępną przestrzeń:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
A teraz za pomocą właściwości
grid-template-columns
sprawmy, aby pierwsza i druga
kolumna zajęły jedną część kontenera,
a trzecia kolumna - trzy części:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Wartości podane w jednostkach fr
mogą przyjmować postać ułamkową. Zmieńmy
poprzedni przykład, podając
dla drugiej i trzeciej kolumny szerokość
w liczbach ułamkowych:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Podajmy we właściwości grid-template-columns
funkcję repeat(),
która poinformuje kontener, że wszystkie
trzy kolumny powinny mieć tę samą szerokość:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
A teraz zmieńmy poprzedni przykład tak, aby do trzech identycznych kolumn dodać czwartą, która zajmie dwie frakcje kontenera:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Ustawmy pierwszym dwóm kolumnom szerokość jednej frakcji kontenera, a ostatnim dwóm kolumnom - dwie frakcje:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
A teraz ustawmy szerokość kolumnom
łącząc wartości podane za pomocą
funkcji repeat() i wolnych jednostek fr:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Również w funkcji repeat() można podać
wartość auto-fill, która wypełni
nasz kontener identycznymi kolumnami o żądanej przez nas szerokości:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Bardzo wygodnie jest razem z auto-fill
podać funkcję minmax,
która ustawia zakres szerokości kolumn
od wartości minimalnej do maksymalnej.
Jeśli szerokość kontenera nie pomieści wszystkich
kolumn, to niektóre z nich przeniosą się
do nowego wiersza, przy czym kolumny w wierszu
równomiernie rozłożą się w nim. Zmieńmy
poprzedni przykład, podając w nim funkcję minmax.
Aby zobaczyć różne warianty rozmieszczenia kolumn
zmieniaj szerokość strony swojej przeglądarki:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Teraz podajmy właściwość auto-fit,
której różnica w stosunku do auto-fill polega na tym,
że dopasowuje ona liczbę kolumn do
dostępnej szerokości kontenera, rozszerzając lub
ściskając je:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Również obok fr można
używać wartości w %, które również określają
jaką część kontenera będzie zajmować kolumna.
Jednak najpierw będzie obliczany rozmiar
kolumny w %, a pozostała wolna przestrzeń
zostanie podzielona na frakcje:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Użyjmy razem właściwości
grid-template-columns i
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
Za pomocą właściwości
grid-template-columns i
grid-template-rows
stwórzmy tabelę z dziewięcioma komórkami, rozmieszczonymi
w trzech wierszach. Przy czym drugi i trzeci wiersz będą miały tę samą szerokość,
a każda kolumna - różną szerokość:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Przykład
A teraz w tabeli z poprzedniego przykładu zróbmy górny wiersz o szerokości dwóch frakcji, a pierwszą kolumnę - o połowie frakcji:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Zobacz też
-
właściwość
grid-template-rows,
która określa liczbę i szerokość wierszy w siatce -
właściwość
grid-auto-columns,
która określa liczbę i szerokość kolumn w niejawnej siatce
