CSS'te Örtük Izgaralar

Örtük ızgara, öğe sayısı açık ızgaraya sığmadığında tarayıcı tarafından otomatik olarak oluşturulur. Bunun nasıl gerçekleştiğine bir göz atalım.

Dört bloğumuz olduğunu varsayalım:

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

Izgaramızın boyutunun 3 x 3 olduğunu varsayalım:

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

Üç bloğumuzu ızgara üzerinde yerleştirelim:

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

Dördüncü bloğu ise dördüncü satır ve sütuna yerleştirelim:

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

Izgaramız 3 x 3 boyutunda olduğu için, bu dördüncü satır ve sütun bu ızgarada bulunmayacak. Ancak bu, bizim tanımladığımız açık biçimde olmayacak. Fakat tarayıcı bunları örtük olarak, yani kendiliğinden oluşturacak.

Bu durumda, boyutları sadece açık ızgara için belirttiğimizden, bu ızgaranın dışındaki hücrelerin boyutları tarayıcı tarafından hesaplanacaktır. Yani bizim durumumuzda dördüncü bloğun boyutları tarayıcı tarafından otomatik olarak belirlenecektir.

Ne elde ettiğimize bir bakalım:

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

Izgaranızda 6 blok olduğunu varsayalım. 3 bloğu açık ızgaraya, üç bloğu ise örtük ızgaraya yerleştirin.