Canh lề trong lưới với các khối có chiều rộng tự động trong CSS

Giả sử chúng ta có một lưới với bốn khối trên một hàng:

.child {
	width: 25%;
}

Hãy thêm khoảng cách theo phần trăm cho các khối của chúng ta theo chiều ngang và chiều dọc:

.child {
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Hiện tại, những gì chúng ta đã làm sẽ hoạt động không chính xác, vì tổng chiều rộng của các khối và khoảng cách lớn hơn 100%. Để hoạt động chính xác chúng ta phải cắt bớt từ mỗi khối một phần nào đó để có chỗ cho khoảng cách của chúng ta. Hãy tính toán những phần này.

Trong trường hợp của chúng ta, kết quả là có bốn khối, và giữa chúng có ba khoảng cách - mỗi khoảng cách một phần rưỡi phần trăm. Để tính phần cần trừ đi, cần chia tổng khoảng cách cho số lượng khối:

1.5% * 3 / 4 = 1.125

Khi đó chiều rộng của mỗi khối sẽ bằng:

25% - 1.5% * 3 / 4 = 23.875%

Chúng ta sẽ có mã như sau:

.child {
	width: 23.875%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Chúng ta có thể không tự tính toán khoảng cách này mà giao công việc tính toán cho hàm calc:

.child {
	width: calc(25% - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Chiều rộng của khối cũng hãy để hàm calc tính:

.child {
	width: calc(100% / 4 - 1.5% * 3 / 4);
	margin-right: 1.5%;
	margin-bottom: 1.5%;
}
.child:nth-child(4n) {
	margin-right: 0;
}

Hãy đặt chiều rộng cho các khối theo phần trăm sao cho trong lưới có ba khối trên một hàng, và giữa chúng có khoảng cách là 3%.

Hãy đặt chiều rộng cho các khối theo phần trăm sao cho trong lưới có sáu khối trên một hàng, và giữa chúng có khoảng cách là 0.5%.

Hãy đặt chiều rộng cho các khối theo phần trăm sao cho trong lưới có bốn khối trên một hàng, và giữa các khối có khoảng cách là 30px.

Hãy đặt chiều rộng cho các khối theo phần trăm sao cho trong lưới có năm khối trên một hàng, và giữa các khối có khoảng cách là 50px.