Laatta oikein marginaaleilla CSS:ssä

Tehdään todella ongelmitta toimiva laatta marginaaleilla. Oletetaan, että meillä on aluksi tällainen laatta ilman marginaaleja:

<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 class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Tehdään horisontaalit marginaalit elementtien välille käyttäen margin:ia.

Asetetaan tätä varten kaikille lapsielementeille margin-right arvoksi 10px, ja nollataan tämä margin jokaiselta kolmannelta lapselta. Käytetään tähän pseudoluokkaa nth-child, asettaen siinä parametrin niin, että saamme jokaisen kolmannen elementin.

Kasvatetaan myös vanhemman leveyttä 320px:ään, antamaan tilaa marginaaleille, ja katsotaan, mitä saamme:

<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 class="child">9</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;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Joten, kaikki toimii. Poistetaan viimeinen elementti, jotta viimeisellä rivillä on vähemmän elementtejä ja varmistetaan, että meillä ei ole ongelmia tämän viimeisen rivin kanssa:

<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;
	border: 1px solid green;
}
.child:nth-child(3n) {
	margin-right: 0;
}

Tee laatta, jossa on kaksi elementtiä per rivi ja elementtien välinen etäisyys on 20px.