Grid dengan Jarak yang Betul dalam CSS
Mari kita buat grid dengan jarak menggunakan margin yang benar-benar berfungsi tanpa masalah. Katakan kita sudah ada grid asas tanpa jarak 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 jarak mendatar antara
elemen menggunakan margin.
Untuk itu, tetapkan untuk semua elemen anak
margin-right kepada nilai 10px,
dan untuk setiap anak ketiga, sifarkan margin ini.
Gunakan pseudokelas nth-child,
dengan menetapkan parameternya untuk mendapatkan
setiap elemen ketiga.
Kita juga akan menambah lebar elemen induk kepada 320px,
untuk memberi ruang bagi jarak, dan lihat
apa yang kita dapat:
<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 buang elemen terakhir, supaya baris terakhir mempunyai lebih sedikit elemen dan pastikan bahawa kita tidak menghadapi masalah dengan baris terakhir 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>
.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;
}
:
Buat grid dengan dua elemen sebaris dengan
jarak antara elemen sebanyak 20px.
