Khoảng cách dọc cho lưới trong CSS

Bây giờ hãy thêm cả khoảng cách dọc. Để làm điều này, hãy đặt margin-bottom với giá trị 10px cho tất cả các phần tử con:

<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;
}

Như chúng ta thấy, mọi thứ hoạt động tốt, ngoại trừ hàng cuối cùng bị thụt vào so với phần tử cha. Thông thường điều này không quan trọng lắm.

Tạo một lưới có hai phần tử trên mỗi hàng với khoảng cách giữa các phần tử là 20px.

Tạo một lưới có ba phần tử trên mỗi hàng với khoảng cách giữa các phần tử là 20px.

Tạo một lưới có bốn phần tử trên mỗi hàng với khoảng cách giữa các phần tử là 20px.