Grile Implicite în CSS

Grila implicită este creată automat de browser, când numărul de elemente nu încape în grila explicită. Să vedem cum se întâmplă acest lucru.

Să presupunem că avem patru blocuri:

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

Să presupunem că grila noastră are dimensiunile 3 pe 3:

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

Să plasăm trei dintre blocurile noastre în grilă:

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

Iar al patrulea bloc îl vom plasa în al patrulea rând și coloană:

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

Deoarece grila noastră are dimensiunea 3 pe 3, acest al patrulea rând și coloană nu vor exista în această grile. Dar nu vor exista în mod explicit, adică în cel definit de noi. Însă browserul le va crea implicit, adică singur.

În acest caz, deoarece am specificat dimensiunile doar pentru grila explicită, pentru celulele din afara acestei grile dimensiunile vor fi calculate de browser. Adică în cazul nostru, dimensiunile celui de-al patrulea bloc vor fi setate automat de browser.

Să vedem ce obținem:

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

Să presupunem că în grila dvs. sunt 6 blocuri. Plasați 3 blocuri în grila explicită, și trei blocuri în grila implicită.