Sử dụng một trong hai auto-fillhoặc auto-fitlàm số lặp lại của repeat()ký hiệu.
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
Khi auto-fillđược cho là số lặp lại, nếu vùng chứa lưới có kích thước xác định hoặc kích thước tối đa trong trục liên quan, thì số lần lặp lại là số nguyên dương lớn nhất có thể không làm cho lưới tràn vùng chứa lưới của nó.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Lưới sẽ lặp lại nhiều bản nhạc nhất có thể mà không làm tràn vùng chứa của nó.
Trong trường hợp này, với ví dụ ở trên (xem hình ảnh) , chỉ có 5 rãnh có thể vừa với khung chứa lưới mà không bị tràn. Chỉ có 4 mục trong lưới của chúng tôi, vì vậy một mục thứ năm được tạo dưới dạng một rãnh trống trong không gian còn lại.
Phần còn lại của không gian còn lại, rãnh số 6, kết thúc lưới rõ ràng. Điều này có nghĩa là không có đủ không gian để đặt một bản nhạc khác.
auto-fit
Các auto-fittừ khóa cư xử giống như auto-fill, ngoại trừ việc sau khi thuật toán sắp xếp item lưới bất kỳ bài hát trống trong không gian còn lại sẽ được thu gọn để 0.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Lưới sẽ vẫn lặp lại nhiều bản nhạc nhất có thể mà không làm tràn vùng chứa của nó, nhưng các đường trống sẽ được thu gọn lại 0.
Một bản nhạc thu gọn được coi là có chức năng định cỡ bản nhạc cố định 0px.
Không giống như auto-fillví dụ hình ảnh, rãnh thứ năm trống được thu gọn, kết thúc lưới rõ ràng ngay sau mục thứ 4.
auto-fill vs auto-fit
Sự khác biệt giữa hai là đáng chú ý khi minmax()chức năng được sử dụng.
Sử dụng minmax(186px, 1fr)để phân chia các mục từ 186pxđến 186pxcộng với một phần nhỏ của không gian còn lại trong vùng chứa lưới.
Khi sử dụng auto-fill, các vật phẩm sẽ lớn dần lên khi không còn chỗ để đặt các rãnh trống.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Khi sử dụng auto-fit, các vật phẩm sẽ phát triển để lấp đầy không gian còn lại vì tất cả các bản nhạc trống đều được thu gọn 0px.
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Sân chơi:
Kiểm tra các tuyến đường tự động điền
Kiểm tra các bản nhạc tự động điều chỉnh
grid-template-columns: auto auto auto auto;làm việc trong trường hợp này? =)