Netiešie gridi CSS

Netiešs grids tiek automātiski izveidots pārlūkprogrammas, kad elementu daudzums neietilpst tiešajā gridā. Apskatīsim, kā tas notiek.

Pieņemsim, ka mums ir četri bloki:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem3">4</div>
</div>

Pieņemsim, ka mūsu gridam ir izmēri 3 uz 3:

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
}

Izvietosim trīs mūsu blokus gridā:

#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}

Un ceturto bloku izvietosim ceturtajā rindā un kolonnā:

#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Tā kā mūsu grids ir izmērā 3 uz 3, tad tādas ceturtās rindas un kolonnas šajā gridā nebūs. Bet tās nebūs tiešā veidā, tas ir, mūsu norādītajā. Bet pārlūkprogramma tās izveidos netieši, tas ir, pati.

Šajā gadījumā, tā kā izmērus mēs norādījām tikai tiešajam gridam, tad šūnām ārpus šī grida izmēri tiks aprēķināti pārlūkprogrammas. Tas ir, mūsu gadījumā ceturtā bloka izmēri tiks iestatīti automātiski.

Apskatīsim, kas mēs iegūsim:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 50px 50px;
	grid-template-rows: 50px 50px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#elem2 {
	grid-row: 2 / 3;
	grid-column: 2 / 3;
}
#elem3 {
	grid-row: 3 / 4;
	grid-column: 3 / 4;
}
#elem4 {
	grid-row: 4 / 5;
	grid-column: 4 / 5;
}

Pieņemsim, ka jūsu gridā ir 6 bloki. Izvietojiet 3 blokus tiešajā gridā, un trīs blokus netiešajā.