Track grid

Kích thước track trong grid tường minh

Khi định nghĩa các track grid bằng grid-template-columns và grid-template-rows, bạn có thể sử dụng bất kỳ đơn vị độ dài nào, và cũng là đơn vị flex fr cho biết một phần của không gian có sẵn trong grid container.

Ví dụ

Ví dụ bên dưới minh họa một grid với ba track cột, một cột 200 pixel, cột thứ hai 1fr, cột thứ ba 3fr. Sau khi trừ đi 200 pixel từ không gian có sẵn trong grid container, không gian còn lại được chia cho 4. Một phần được cấp cho cột 2, 3 phần cho cột 3.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr 3fr;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

Kích thước track trong grid ngầm

Các track được tạo trong grid ngầm được tự động định kích thước theo mặc định, tuy nhiên bạn có thể định nghĩa kích thước cho các track này bằng cách sử dụng các thuộc tính grid-auto-rows và grid-auto-columns.

Xem thêm

• Khái niệm cơ bản về bố cục grid
• Định nghĩa về track grid trong đặc tả bố cục CSS grid
• Tham khảo thuộc tính
  • grid-template-columns
  • grid-template-rows
  • grid
  • grid-template