Hendekët Vertikale për Pllaka në CSS

Tani le të shtojmë edhe hendekë vertikale. Për këtë, do t'u caktojmë të gjithë pasardhësve margin-bottom me vlerë 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;
}

Siç e shohim, gjithçka funksionon mirë, përveç asaj që rreshti i fundit ka një hendek nga prindi. Shpesh kjo nuk është kritike.

Krijoni një pllakë me dy elementë në një rresht me distancë midis elementeve prej 20px.

Krijoni një pllakë me tre elementë në një rresht me distancë midis elementeve prej 20px.

Krijoni një pllakë me katër elementë në një rresht me distancë midis elementeve prej 20px.