Ô lưới với khoảng cách đúng cách trong CSS
Hãy cùng tạo một ô lưới thực sự hoạt động không gặp vấn đề với khoảng cách sử dụng margin. Giả sử ban đầu chúng ta có một ô lưới không có khoảng cách như thế này:
<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;
}
:
Hãy tạo khoảng cách ngang giữa
các phần tử bằng cách sử dụng margin.
Để làm điều đó, hãy đặt
margin-right cho tất cả các phần tử con
thành giá trị 10px,
và xóa margin này cho mỗi phần tử con thứ ba.
Chúng ta sẽ sử dụng pseudo-class nth-child,
thiết lập tham số trong đó để lấy
mỗi phần tử thứ ba.
Chúng ta cũng sẽ tăng chiều rộng của phần tử cha lên 320px,
để dành chỗ cho khoảng cách, và xem
chúng ta nhận được kết quả gì:
<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;
}
:
Vậy là mọi thứ hoạt động. Hãy bỏ phần tử cuối cùng, để hàng cuối cùng có ít phần tử hơn và đảm bảo rằng điều này không gây ra vấn đề gì với hàng cuối cùng đó:
<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;
}
:
Tạo một ô lưới với hai phần tử trên một hàng và
khoảng cách giữa các phần tử là 20px.
