CSS'te Alt Izgaralar

Alt ızgara, iç içe geçmiş bir ızgaranın bir çeşididir, ancak ondan farklı olarak üst öğe ızgara konteynırının boyutunu etkiler. Bir alt ızgara oluşturmak için, alt öğenin kendisinde display özelliğini subgrid değerine ayarlamanız gerekir.

Örnek olarak, dördüncü öğede iç içe bir ızgara oluşturalım:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem4 {
	display: subgrid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 5px;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

İki sütuna yerleştirilmiş beş öğeden oluşan bir ızgaranız olduğunu varsayalım. Üçüncü öğenin içinde, kendi içinde iki alt öğe bulunan iç içe bir ızgara oluşturun.

Önceki görevi, iç içe geçmiş ızgarada dört alt öğe olacak şekilde değiştirin.

İkinci öğede ve beşinci öğede olmak üzere iki tane iç içe ızgara oluşturun.