CSS-те плиталар үшін тік шегіністер

Енді тік шегіністерді де қосамыз. Ол үшін барлық дочер элементтерге margin-bottom қасиетін 10px мәнінде тағайындаймыз:

<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;
}

Көріп отырғанымыздай, соңғы қатардың родителінен шегінуінен басқа барлығы жақсы жұмыс істейді. Бұл көбінесе сыни емес.

Элементтер арасындағы қашықтығы 20px болатын, бір қатарда екі элементтен тұратын плита жасаңыз.

Элементтер арасындағы қашықтығы 20px болатын, бір қатарда үш элементтен тұратын плита жасаңыз.

Элементтер арасындағы қашықтығы 20px болатын, бір қатарда төрт элементтен тұратын плита жасаңыз.