Các mục đáp ứng đầy đủ với lưới CSS và tự động điều chỉnh minmax

Question

Việc sử dụng grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)) giúp dễ dàng xây dựng lưới CSS đáp ứng. Vùng chứa sẽ được lấp đầy với nhiều thành phần phù hợp với một hàng, mà không sử dụng truy vấn phương tiện.

.container { 
 
    display: grid; 
 
    grid-gap: 5px; 
 
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background: #ccc; 
 
}

<div class="container"> 
 
    <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>

Vấn đề là các mặt hàng là rộng hơn so với màn hình khi màn hình nhỏ hơn min-giá trị quy định tại minmax(). Bạn có thể khắc phục điều này bằng cách thêm truy vấn phương tiện tại 400px, nhưng điều này chỉ hoạt động khi bạn biết rằng không có nội dung nào xung quanh vùng chứa. Và đó là hầu như không thể khi các container có thể được đặt bất cứ nơi nào.

Có cách nào hay tài sản để nói cho các mục mà chúng không bao giờ nên rộng hơn 100%?

Thứ gì đó như: Đổ đầy thùng chứa với nhiều mục 400px nhất có thể, nhưng đảm bảo rằng chúng không rộng hơn 100% chiều rộng của vùng chứa.

CodePen Demo

Answer 1

Điền container với càng nhiều 400px mục càng tốt, nhưng đảm bảo không rằng trong số họ trở nên rộng hơn 100% chiều rộng của thùng sơn.

Cho rằng bạn có thể sử dụng "max-nội dung" bất động sản, trong ví dụ của bạn này sẽ là:

.unresponsive { 
    grid-template-columns: repeat(auto-fit, minmax(400px, auto)); 
    grid-auto-columns: max-content; 
} 

Answer 2

Bạn nên thay đổi grid-template-columns-grid-template-columns: repeat(auto-fit, minmax(min-content, 400px)) vì minmax tác phẩm theo cách này: nó cố gắng để áp dụng tối đa giá trị và nếu thất bại nó áp dụng tối thiểu. Nhưng trong này, bạn có thể nhận được khoảng trống trong lưới của bạn ở bên phải. Demo:

.container { 
 
    display: grid; 
 
    grid-gap: 5px; 
 
    grid-template-columns: repeat(auto-fit, minmax(min-content, 400px)); 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background: #ccc; 
 
}

<div class="container"> 
 
    <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>