Thuộc tính grid-auto-columns

Thuộc tính grid-auto-columns xác định số lượng và độ rộng cột mà một phần tử sẽ chiếm trong lưới ngầm định. Lưới ngầm định - lưới được tạo ra tự động khi các phần tử vượt ra khỏi ranh giới của lưới đã được xác định. Trong giá trị của thuộc tính, chúng ta chỉ định độ rộng cột bằng bất kỳ đơn vị đo kích thước nào. Thuộc tính được chỉ định trong phần tử cha và xác định độ rộng cột của các phần tử con.

Cú pháp

cssbộ chọn {
  grid-auto-columns: độ rộng cột;
}

Ví dụ

Hãy xác định độ rộng cột cho các phần tử của chúng ta trong lưới ngầm định:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 40px 40px;
  grid-auto-columns: 200px;
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Xem thêm