Proprietatea grid-template

Proprietatea grid-template stabilește numărul și lățimea rândurilor și coloanelor, pe care le va ocupa un element în grid sau rețea și este forma prescurtată a proprietăților grid-template-rows și grid-template-columns. Rândurile și coloanele, pe care va fi plasat elementul sunt indicate prin slash. Proprietatea grid-template este stabilită în elementul-părinte și determină poziționarea elementelor-copil. În valoarea proprietății specificăm lățimea rândurilor sau coloanelor în orice unități pentru dimensiuni.

La specificarea valorilor în proprietăți în pixeli dimensiunile elementelor vor corespunde exact acestora. Dacă folosim cuvântul auto, atunci coloanele și rândurile vor umple tot spațiul disponibil. Utilizarea unității fr (fracție) înseamnă, că tot spațiul va fi împărțit în părți egale. Avantajul fr este adaptabilitatea sa la diferite containere sau rezoluții ale ecranului, deoarece fr pur și simplu împarte acestea în numărul indicat de fracții fără a fi legat de dimensiunea exactă în pixeli.

Sintaxă

selector {
	grid-template: lățime și număr de rânduri / lățime și număr de coloane;
}

Exemplu

Haideți cu ajutorul proprietății grid-template să facem un 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;
}

Exemplu

Iar acum haideți să stabilim pentru al doilea și al treilea rând aceeași lățime, iar fiecărei coloane - o lățime diferită:

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

Exemplu

Iar acum în tabelul din exemplul anterior să facem rândul de sus cu lățimea de două fracții, iar prima coloană - de jumătate de fracție:

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

Vedeți și

proprietatea grid,
care stabilește forma prescurtată a proprietăților coloanelor și rândurilor
proprietatea grid-template-rows,
care stabilește numărul și lățimea rândurilor în grid
proprietatea grid-template-columns,
care stabilește numărul și lățimea coloanelor în grid