2017-12-19 56 views
6

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

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

Trả lời

4

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:

+0

Có một sự khác biệt giữa '1fr' và' tự động 'trong ngữ cảnh này t? Có vẻ như "tự động" có thể làm cho độ rộng cột không đồng đều nhưng điều đó dường như không đúng. – mpen

+0

Độ rộng cột không đồng đều vì chiều rộng tối thiểu cho mỗi cột được cố định ở 100px và * không có nội dung trong các mục *, là cơ sở cho 'tự động'. –

+0

'1fr' phân phối không gian đồng đều trên các cột: https://jsfiddle.net/fj3cpwva/ –

Các vấn đề liên quan