İç İçe CSS Gridler

Grid sisteminde, oluşturduğunuz kendi ızgaranıza yeni bir iç içe grid ekleme imkanı vardır. İç içe gridler, bir site blokları içindeki küçük elemanları yerleştirirken yaygın olarak kullanılır. Bu özellikten yararlanmak için, alt elemanın kendisinde display özelliğini grid değerine ayarlamanız gerekir.

Örnek olarak, grid hücrelerinden birinin içinde başka bir grid 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: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Üç sütun boyunca yerleştirilmiş beş elemandan oluşan bir gridiniz olduğunu varsayalım. İkinci elemanın içinde, kendi içinde üç alt eleman bulunan bir iç içe grid oluşturun.

Önceki görevi, iç içe gridde beş alt eleman bulunacak şekilde değiştirin.

Birinci ve üçüncü elemanlarda, her birinde üçer alt eleman bulunan birer iç içe grid oluşturun.