Làm thế nào để có được các mục lưới có độ dài khác nhau để quấn?

Question

Với các chức năng repeat() và auto-fit/auto-fill thật dễ dàng để có được các mục lưới để bọc khi có một mẫu chiều dài được xác định cho các cột hoặc hàng.

Trong ví dụ bên dưới, tất cả các cột có chiều rộng tối thiểu là 100px và chiều rộng tối đa là 1fr.

jsFiddle demo

#grid { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
 
    grid-gap: 1em; 
 
} 
 

 
#grid > div { 
 
    background-color: #ccddaa; 
 
    padding: 10px; 
 
}

<div id="grid"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Nhưng khi các bài hát không có hoa văn dài (ví dụ, độ dài khác nhau một cách ngẫu nhiên), làm thế nào có thể các mặt hàng lưới được thực hiện để quấn?

Trong ví dụ bên dưới, cột đầu tiên có chiều rộng 60%. Cột thứ hai là min/max 250px/1fr. Làm thế nào tôi có thể lấy cột thứ hai để bọc trên màn hình nhỏ hơn?

jsFiddle demo

#grid { 
 
    display: grid; 
 
    grid-template-columns: 60% minmax(250px, 1fr); 
 
    grid-gap: 1em; 
 
} 
 

 
#grid > div { 
 
    background-color: #ccddaa; 
 
    padding: 10px; 
 
}

<div id="grid"> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Tôi biết flexbox và phương tiện truyền thông truy vấn cung cấp giải pháp, nhưng tôi đang tự hỏi nếu Lưới Giao diện có thể làm điều này. Tôi đã tìm kiếm số spec nhưng không tìm thấy gì. Có lẽ tôi đã bỏ lỡ phần. Cảm ơn bạn đã giúp đỡ.

Answer 1

Các mục lưới không thực sự được bao bọc. Lý do bạn thấy các mục lưới "gói" cho hàng tiếp theo thực sự là vì lưới rõ ràng đang bị thay đổi để giữ trong các ràng buộc được quy định bởi minmax(). Số cột được tạo bởi repeat() tỷ lệ thuận với chiều rộng được sử dụng của vùng chứa lưới và các mục lưới được đặt từng cái một theo số cột, với các hàng mới được tạo khi cần thiết.

Vì vậy, không thể buộc mục lưới thứ hai bọc khi có hai cột và có chỗ trong lưới rõ ràng để chèn mục lưới đó vào cột thứ hai. Bên cạnh đó, ngay cả khi bạn có thể cho biết mục lưới thứ hai để "bọc", điều đó có nghĩa là đặt nó trong hàng mới trong cột đầu tiên, do đó bố cục của nó sẽ được điều chỉnh bởi cột đầu tiên chứ không phải cột thứ hai. Tuy nhiên, nó vẫn có kích thước theo cột thứ hai, sẽ phá vỡ hoàn toàn bố cục lưới.

Nếu ý định là để chứa các màn hình nhỏ hơn bằng cách gói các phần tử vào các dòng mới, bố trí flex nên được sử dụng, không bố cục lưới. Bố cục lưới không phù hợp với mục đích này.