Ý nghĩa của auto-fit trong CSS Grid
Bây giờ hãy xem xét giá trị auto-fit,
cũng được sử dụng khi chỉ định các cột có cùng kích thước
kết hợp với hàm repeat.
Sự khác biệt của nó so với giá trị auto-fill là
auto-fit điều chỉnh số lượng cột cho phù hợp với
chiều rộng có sẵn của vùng chứa, bằng cách mở rộng hoặc
thu nhỏ chúng.
Ví dụ
Hãy xem xét cách hoạt động của giá trị auto-fit
với ví dụ về một vùng chứa có tám phần tử. Chúng ta áp dụng
cùng với giá trị auto-fit hàm minmax mà bạn đã biết
từ bài học trước:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Và bây giờ hãy giảm chiều rộng của vùng chứa grid
xuống 400px:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Bài tập thực hành
Giả sử bạn có một lưới gồm chín phần tử.
Hãy thiết lập cho chúng bằng giá trị auto-fit
chiều rộng cột và chiều rộng của vùng chứa grid sao cho
tất cả các phần tử con được sắp xếp thành ba hàng.
Và bây giờ hãy sửa đổi bài tập trước sao cho tất cả các phần tử được sắp xếp thành hai hàng.
