Papan Ubin dengan Spasi yang Benar di CSS
Mari kita buat papan ubin dengan spasi menggunakan margin yang benar-benar berfungsi tanpa masalah. Misalkan awalnya kita memiliki papan ubin tanpa spasi seperti ini:
<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;
}
:
Mari buat spasi horizontal antara
elemen menggunakan margin.
Untuk melakukan ini, atur untuk semua elemen anak
margin-right ke nilai 10px,
dan untuk setiap anak ketiga, nolkan margin ini.
Gunakan pseudo-class nth-child untuk ini,
dengan mengatur parameternya sehingga mendapatkan
setiap elemen ketiga.
Kita juga akan menambah lebar parent menjadi 320px,
untuk memberikan ruang bagi spasi, dan lihat
apa yang kita dapatkan:
<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;
}
:
Jadi, semuanya berfungsi. Mari kita hapus elemen terakhir sehingga di baris terakhir ada lebih sedikit elemen dan pastikan bahwa dengan ini kita tidak memiliki masalah dengan baris terakhir tersebut:
<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;
}
:
Buatlah papan ubin dengan dua elemen per baris dan
jarak antar elemen sebesar 20px.
