Hình lưới thích ứng với khoảng cách trong CSS

Bây giờ hãy cùng tạo một hình lưới có khoảng cách. Đây là ví dụ về kết quả chúng ta nên đạt được:

Đầu tiên, hãy tạo kiểu cho phần tử chứa các khối:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}

Bây giờ hãy đặt kiểu cho các khối, chưa đặt chiều rộng, nhưng đặt margin dưới bằng phần trăm:

.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	margin-bottom: 1.5%;
	border: 1px solid green;
}

Bây giờ hãy viết mã đặt bốn khối trên một hàng, với các khoảng cách phù hợp:

@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Và bây giờ đặt ba khối trên một hàng:

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}

Và bây giờ đặt hai khối trên một hàng:

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}

Một khối trên một hàng:

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}

Hãy tập hợp tất cả mã lại với nhau:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 95%;
	margin: 50px auto;
}
.child {
	box-sizing: border-box;
	height: 100px;
	padding: 20px;
	margin-bottom: 1.5%;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: calc(100% / 2 - 1.5% * 1 / 2);
	}
	.child:not(:nth-child(2n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: calc(100% / 3 - 1.5% * 2 / 3);
	}
	.child:not(:nth-child(3n)) {
		margin-right: 1.5%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: calc(100% / 4 - 1.5% * 3 / 4);
	}
	.child:not(:nth-child(4n)) {
		margin-right: 1.5%;
	}
}

Hãy tạo một hình lưới, khi thu nhỏ màn hình sẽ có tám phần tử trên một hàng trước, sau đó bốn phần tử trên một hàng, rồi hai phần tử trên một hàng. Hãy để khoảng cách giữa các phần tử là 0.75%.

Hãy sửa đổi bài toán trước sao cho khoảng cách giữa các phần tử là một giá trị cố định 20px.