Khoảng cách rãnh

Ví dụ

Trong ví dụ bên dưới, chúng ta có một grid ba cột và hai track hàng, với khoảng cách 20px giữa cả track cột và track hàng.

* {
  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: #fff8f8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1.2fr);
  grid-auto-rows: 45%;
  column-gap: 20px;
  row-gap: 20px;
}

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

Về kích thước grid, các khoảng cách hoạt động như thể chúng là một track grid thông thường, tuy nhiên không thể đặt bất cứ thứ gì vào khoảng cách. Khoảng cách hoạt động như thể đường grid tại vị trí đó đã được mở rộng thêm, vì vậy bất kỳ grid item nào được đặt sau đường đó bắt đầu từ cuối khoảng cách.

Các thuộc tính row-gap và column-gap không phải là điều duy nhất có thể khiến các track cách xa nhau. Margins, padding hoặc việc sử dụng các thuộc tính phân phối không gian trong CSS box alignment đều có thể góp phần vào khoảng cách hiển thị — do đó các thuộc tính row-gap và column-gap không nên được coi là bằng với "kích thước gutter" trừ khi bạn biết rằng thiết kế của bạn không đưa ra thêm không gian nào bằng một trong các phương pháp này.

Xem thêm

• CSS grid layout

• Tham khảo thuộc tính

  • column-gap
  • row-gap
  • gap

• Định nghĩa về gutters trong đặc tả bố cục CSS grid