Implicitní CSS grid

Implicitní grid je automaticky vytvořen prohlížečem, když se počet prvků nevejde do explicitní mřížky. Podívejme se, jak k tomu dochází.

Předpokládejme, že máme čtyři bloky:

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

Předpokládejme, že naše mřížka má rozměry 3 na 3:

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

Umístěme tři naše bloky do mřížky:

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

A čtvrtý blok umístíme do čtvrtého řádku a sloupce:

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

Protože naše mřížka má rozměr 3 na 3, takový čtvrtý řádek a sloupec v této mřížce nebude existovat. Ale nebude existovat v explicitní podobě, tedy v té, kterou jsme definovali. Prohlížeč je však vytvoří implicitně, tedy sám.

Zároveň, protože jsme uvedli rozměry pouze pro explicitní mřížku, tak pro buňky mimo tuto mřížku budou rozměry vypočítány prohlížečem. To znamená, že v našem případě budou rozměry čtvrtého bloku nastaveny prohlížečem automaticky.

Podívejme se, co jsme získali:

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

Předpokládejme, že máte v mřížce 6 bloků. Umístěte 3 bloky do explicitní mřížky a tři bloky do implicitní.