Làm thế nào để có được các mục để kéo dài để lấp đầy chiều rộng?

Question

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, 100px); 
 
    grid-gap: 3px; 
 
    border: 1px solid green; 
 
} 
 

 
.item { 
 
    border: 1px solid red; 
 
    height: 50px; 
 
}

<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 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>

Làm thế nào tôi có thể kéo dài màu đỏ item hộp một chút để họ lấp đầy toàn bộ chiều rộng của màu xanh lá cây container hộp?

Tất cả chúng đều có cùng chiều rộng và lớn hơn một chút so với 100px.

Hàng cuối cùng phải được căn trái như hiện tại.

Answer 1

Bạn chỉ cần thêm đơn vị phân số vào quy tắc grid-template-columns.

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 

Quy tắc này tạo bao nhiêu cột phù hợp với vùng chứa.

Chiều rộng tối thiểu của mỗi cột là 100px.

Chiều rộng tối đa là 1fr, có nghĩa là cột sẽ tiêu thụ bất kỳ dung lượng trống nào trên hàng.

Hiện tại, tất cả không gian ngang trong vùng chứa đang được sử dụng.

.container { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
 
    grid-auto-rows: 50px; 
 
    grid-gap: 3px; 
 
    border: 1px solid green; 
 
} 
 

 
.item { 
 
    border: 1px solid red; 
 
}

<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 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>

Những bài viết giải thích các giải pháp trên một cách chi tiết hơn:

• Equal width flex items even after they wrap
• The difference between percentage and fr units in CSS Grid Layout