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

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

css#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:

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

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