Grid Tersirat dalam CSS

Grid tersirat dicipta secara automatik oleh pelayar, apabila bilangan elemen tidak muat dalam grid tersurat. Mari kita lihat bagaimana ini berlaku.

Katakan kita mempunyai empat blok:

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

Katakan grid kami mempunyai dimensi 3 kali 3:

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

Mari letakkan tiga blok kami mengikut 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;
}

Dan blok keempat kami letakkan pada baris dan lajur keempat:

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

Memandangkan grid kami bersaiz 3 kali 3, maka baris dan lajur keempat tersebut tidak wujud dalam grid ini. Tetapi ia tidak wujud dalam bentuk tersurat, iaitu yang kita tetapkan. Namun, pelayar akan menciptanya secara tersirat, iaitu sendiri.

Pada masa yang sama, memandangkan kami hanya menyatakan dimensi untuk grid tersurat, maka untuk sel di luar grid ini, dimensi akan dikira oleh pelayar. Maksudnya, dalam kes kami, dimensi blok keempat akan ditetapkan secara automatik oleh pelayar.

Mari kita lihat apa yang kami dapat:

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

Katakan dalam grid anda terdapat 6 blok. Letakkan 3 blok dalam grid tersurat, dan tiga blok dalam grid tersirat.