CSS'te Karo Düzeni için Dikey Boşluklar

Şimdi dikey boşluklar da ekleyelim. Bunun için tüm alt öğelere 10px değerinde margin-bottom atayalı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>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Gördüğümüz gibi, son sıranın ebeveynden boşluk alması dışında her şey iyi çalışıyor. Çoğu zaman bu kritik değildir.

Öğeler arasında 20px mesafe olacak şekilde satırda iki öğeli bir karo düzeni yapın.

Öğeler arasında 20px mesafe olacak şekilde satırda üç öğeli bir karo düzeni yapın.

Öğeler arasında 20px mesafe olacak şekilde satırda dört öğeli bir karo düzeni yapın.