Masonry layout
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Cấp độ 3 của đặc tả CSS grid layout định nghĩa masonry layout (còn được gọi là grid-lanes layout), được truy cập thông qua các giá trị grid-lanes và inline-grid-lanes của display. Hướng dẫn này giải thích masonry layout là gì và cách sử dụng nó.
Masonry layout là một phương pháp layout trong đó một trục sử dụng layout grid nghiêm ngặt thông thường, thường là các cột, và trục kia sử dụng layout xếp chồng (masonry). Trên trục xếp chồng, thay vì bám vào một grid nghiêm ngặt với các khoảng trống để lại sau các phần tử ngắn hơn, các phần tử trong hàng tiếp theo sẽ dâng lên để lấp đầy các khoảng trống.
Tạo masonry layout
Để tạo masonry layout phổ biến nhất trong đó các cột được bố trí theo grid và các hàng xếp chồng như masonry, hãy sử dụng display: grid-lanes cùng với grid-template-columns.
Các phần tử con của container này sẽ bố trí từng phần tử một dọc theo trục xếp chồng theo thuật toán masonry: mỗi hàng phần tử tải vào cột có nhiều không gian nhất, tạo ra bố cục được đóng gói chặt chẽ mà không có các row track nghiêm ngặt.
.grid {
display: grid-lanes;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
// prettier-ignore
const itemSizes = [
"2em", "3em", "1.6em", "4em", "3.2em",
"3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
items[i].style.blockSize = itemSizes[i];
}
Cũng có thể tạo masonry layout với các phần tử tải vào các hàng.
// prettier-ignore
const itemSizes = [
"2em", "3em", "1.6em", "4em", "2.2em",
"3em", "4.5em", "1em", "3.5em", "2.8em",
];
const items = document.querySelectorAll(".item");
for (let i = 0; i < items.length; i++) {
items[i].style.inlineSize = itemSizes[i];
}
.grid {
display: grid-lanes;
gap: 10px;
grid-template-rows: repeat(3, 100px);
}
Kiểm soát trục grid
Trên trục grid, mọi thứ sẽ hoạt động như bạn mong đợi trong grid layout. Bạn có thể làm cho các phần tử trải dài qua nhiều track trong khi vẫn ở chế độ auto-placement, bằng cách sử dụng từ khóa span. Các phần tử cũng có thể được định vị bằng line-based positioning.
Masonry layout với các phần tử spanning
Trong ví dụ này, hai trong số các phần tử trải dài qua hai track, và các phần tử masonry hoạt động xung quanh chúng.
<div class="grid">
<div class="item"></div>
<div class="item span-2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item span-2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.grid {
display: grid-lanes;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.span-2 {
grid-column-end: span 2;
}
Ví dụ này bao gồm một phần tử có định vị cho các cột. Các phần tử có definite placement được đặt trước khi masonry layout xảy ra.
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item positioned">positioned.</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.grid {
display: grid-lanes;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.positioned {
padding: 1em;
grid-column: 2 / 4;
}
Fallback cho masonry layout
Trong các trình duyệt không hỗ trợ masonry, thay vào đó sẽ sử dụng grid auto-placement thông thường.
Thông số kỹ thuật
| Specification |
|---|
| CSS Grid Layout Module Level 3 # masonry-layout |
Tương thích trình duyệt
css.properties.grid-template-columns.masonry
css.properties.grid-template-rows.masonry
Xem thêm
grid-auto-flowđể kiểm soát grid auto-placement- Native CSS masonry layout in CSS grid qua Smashing Magazine (2020)