CSS-də kafel üçün şaquli boşluqlar

İndi isə şaquli boşluqları da əlavə edək. Bunun üçün bütün uşaq elementlərə margin-bottom xassəsini 10px dəyəri ilə təyin edək:

<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üyümüz kimi, hər şey yaxşı işləyir, ancaq sonuncu sıranın valideyndən aralı olması istisna olmaqla. Çox vaxt bu, problemin yaranmasına səbəb olmur.

Elementlər arasında məsafəni 20px olmaqla, hər sırada iki element olan bir kafel hazırlayın.

Elementlər arasında məsafəni 20px olmaqla, hər sırada üç element olan bir kafel hazırlayın.

Elementlər arasında məsafəni 20px olmaqla, hər sırada dörd element olan bir kafel hazırlayın.