Bố cục lưới thích ứng không có khoảng trống trong CSS

Hãy tạo một bố cục lưới, sẽ có số lượng khối trên mỗi hàng khác nhau tùy thuộc vào độ rộng màn hình. Đây là ví dụ về kết quả chúng ta cần đạt được:

Trước tiên, hãy viết mã HTML:

<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 class="child">10</div>
	<div class="child">11</div>
	<div class="child">12</div>
</div>

Bây giờ hãy thêm kiểu cho phần tử cha củ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 chính các khối, nhưng không đặt chiều rộng cho chúng:

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

Rõ ràng là chiều rộng của các khối phải ở dạng phần trăm, để khi thay đổi kích thước màn hình, các khối sẽ thay đổi chiều rộng một cách mượt mà. Đồng thời, tại những điểm nhất định của màn hình, chúng ta phải thay đổi chiều rộng của các khối để có một số lượng nhất định các khối này vừa trên một hàng.

Hãy viết mã, sẽ đặt bốn khối trên một hàng:

@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

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

@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}

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

@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}

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

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

Hãy tổng 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;
	border: 1px solid green;
}

@media (max-width: 400px) {
	.child {
		width: 100%;
	}
}
@media (min-width: 400px) and (max-width: 700px) {
	.child {
		width: 50%;
	}
}
@media (min-width: 700px) and (max-width: 1000px) {
	.child {
		width: 33.3333%;
	}
}
@media (min-width: 1000px) {
	.child {
		width: 25%;
	}
}

Chỉnh sửa mã của tôi sao cho chiều rộng của các khối được tính thông qua hàm calc.

Tạo một bố cục lưới, khi thu nhỏ màn hình sẽ có bốn phần tử trên một hàng, sau đó hai phần tử trên một hàng, và sau đó một phần tử trên một hàng.

Tạo một bố cục lưới, khi thu nhỏ màn hình sẽ có sáu phần tử trên một hàng, sau đó ba phần tử trên một hàng, và sau đó một phần tử trên một hàng.