Vertikālie atkāpes flīžu izkārtojumā CSS

Tagad pievienosim arī vertikālās atkāpes. Lai to izdarītu, visiem pēctečiem iestatīsim margin-bottom vērtību 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;
}

Kā mēs redzam, viss strādā labi, izņemot to, ka pēdējā rinda atkāpjas no vecāka elementa. Visbiežāk tas nav kritiski.

Izveidojiet flīžu izkārtojumu ar diviem elementiem rindā ar attālumu starp elementiem 20px.

Izveidojiet flīžu izkārtojumu ar trim elementiem rindā ar attālumu starp elementiem 20px.

Izveidojiet flīžu izkārtojumu ar četriem elementiem rindā ar attālumu starp elementiem 20px.