Właściwość grid-template

Właściwość grid-template określa liczbę i szerokość wierszy i kolumn, które element będzie zajmował w siatce i jest skróconą formą właściwości grid-template-rows oraz grid-template-columns. Wiersze i kolumny, na których zostanie umieszczony element, są wskazane przez ukośnik. Właściwość grid-template jest ustawiana w elemencie-rodzicu i określa położenie elementów-dzieci. W wartości właściwości podajemy szerokość wierszy lub kolumn w dowolnych jednostkach dla rozmiarów.

Przy podawaniu wartości w pikselach we właściwościach rozmiary elementów będą dokładnie im odpowiadać. Jeśli podamy słowo auto, to kolumny i wiersze będą zajmować 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 wskazaną liczbę frakcji bez przywiązania do dokładnego rozmiaru w pikselach.

Składnia

selektor {
	grid-template: szerokość i liczba wierszy / szerokość i liczba kolumn;
}

Przykład

Stwórzmy za pomocą właściwości grid-template tabelę:

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Przykład

A teraz ustawmy drugiemu i trzeciemu wierszowi tę samą szerokość, a każdej kolumnie - 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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#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: 2fr 1fr 1fr / 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,
która określa skrócony zapis właściwości kolumn i wierszy
właściwość grid-template-rows,
która określa liczbę i szerokość wierszy w siatce
właściwość grid-template-columns,
która określa liczbę i szerokość kolumn w siatce