CSS'de Otomatik Genişlikli Bloklarla Izgara Düzeni

Önceki derste, ızgara düzenimizde elemanların genişliği ve boşluklarının toplamının ebeveynin genişliğini vermesi gerekiyordu. Bu biraz evrensel değil. Hadi elemanların ebeveynin genişliğine otomatik olarak uyum sağlamasını yapalım.

Şöyle bir ebeveynimiz olduğunu varsayalım:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

Bu ızgaranın elemanlarının satırda 4 blok halinde durduğunu varsayalım:

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

Bloklarımızın genişliğini, her birinin ebeveynin dörtte birini kaplayacak şekilde ayarlayalım. Bunun için boyutlarını 25% olarak belirleyelim:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

Bloklara, ızgarada satırda üç blok olacak şekilde yüzde cinsinden genişlik verin.

Bloklara, ızgarada satırda iki blok olacak şekilde yüzde cinsinden genişlik verin.

Bloklara, ızgarada satırda birer blok olacak şekilde yüzde cinsinden genişlik verin.