Vipimo vya Wima kwa Tile katika CSS

Sasa tuongeze vipimo vya wima pia. Ili kufanya hivyo, tuweke kwa watoto wote margin-bottom kwa thamani ya 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;
}

Kama tunavyoona, yote yanafanya kazi vizuri, isipokuwa kwa safu ya mwisho ina pengo kutoka kwa mzazi. Mara nyingi hii sio muhimu.

Tengeneza tile yenye vipengele viwili kwa safu na umbali kati ya vipengele wa 20px.

Tengeneza tile yenye vipengele vitatu kwa safu na umbali kati ya vipengele wa 20px.

Tengeneza tile yenye vipengele vinne kwa safu na umbali kati ya vipengele wa 20px.