CSS'de Kenar Boşluksuz Duyarlı Izgara

Ekran genişliğine bağlı olarak satırda farklı sayıda blok bulunan bir ızgara yapalım. İşte elde edeceğimiz sonucun bir örneği:

Önce HTML kodunu yazalım:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
	<div class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Şimdi blokların ebeveynine stiller ekleyelim:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Şimdi genişliklerini belirlemeden blokların kendilerine stiller verelim:

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

Blokların genişliğinin yüzde olması gerektiği açıktır, böylece ekran değiştiğinde bloklar genişliklerini sorunsuz bir şekilde değiştirebilir. Aynı zamanda, ekranın belirli noktalarında, satıra belirli sayıda blok sığacak şekilde blokların genişliğini değiştirmeliyiz.

Satıra dört blok yerleştiren kodu yazalım:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Şimdi satıra üç blok yerleştirelim:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

Şimdi satıra iki blok yerleştirelim:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

Satıra bir blok:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Tüm kodu bir araya getirelim:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Kodumu, blok genişliklerinin calc fonksiyonu ile hesaplanacak şekilde değiştirin.

Ekran küçüldüğünde önce satırda dört öğe, sonra iki öğe ve daha sonra bir öğe olacak şekilde bir ızgara yapın.

Ekran küçüldüğünde önce satırda altı öğe, sonra üç öğe ve daha sonra bir öğe olacak şekilde bir ızgara yapın.