A grid-template tulajdonság

A grid-template tulajdonság meghatározza a rácsban elfoglalt sorok és oszlopok számát és szélességét, és a grid-template-rows és grid-template-columns tulajdonságok rövidített formája. A sorok és oszlopok, amelyeken az elem elhelyezkedik, perjellel vannak elválasztva. A grid-template tulajdonságot a szülő elemben állítjuk be, és meghatározza a gyermek elemek elhelyezkedését. A tulajdonság értékében a sorok vagy oszlopok szélességét bármilyen mértékegységben megadhatjuk a méretekhez.

Ha a tulajdonságokban pixelben adjuk meg az értékeket, akkor az elemek mérete pontosan ennek felel meg. Ha az auto szót adjuk meg, akkor az oszlopok és sorok az összes elérhető helyet kitöltik. Az fr (fraction - töredék) egység használata azt jelenti, hogy az összes helyet egyenlő részekre osztják. Az fr előnye, hogy adaptív a különböző tárolókhoz vagy képernyőfelbontásokhoz, mivel az fr egyszerűen felosztja azokat a megadott számú töredékre anélkül, hogy pixelekben kifejezett pontos mérethoz kötné.

Szintaxis

selector {
	grid-template: sorok szélessége és száma / oszlopok szélessége és száma;
}

Példa

Készítsünk táblázatot a grid-template tulajdonság segítségével:

<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;
}

Példa

Most adjunk a második és harmadik sornak azonos szélességet, és minden oszlopnak különböző szélességet:

<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;
}

Példa

Most az előző példa táblázatában tegyük a felső sor szélességét két töredékre, és az első oszlop szélességét fél töredékre:

<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;
}

Lásd még

a grid tulajdonság,
amely az oszlopok és sorok tulajdonságainak rövidített formáját adja meg
a grid-template-rows tulajdonság,
amely a rács sorainak számát és szélességét határozza meg
a grid-template-columns tulajdonság,
amely a rács oszlopainak számát és szélességét határozza meg