Đường grid

Ví dụ

Trong ví dụ sau, có một grid với ba track cột và hai track hàng. Điều này tạo ra 4 đường cột và 3 đường hàng.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

html

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

css

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}

Các đường có thể được địa chỉ hóa bằng số đường của chúng. Trong ngôn ngữ viết từ trái sang phải như tiếng Anh, đường cột 1 sẽ nằm ở bên trái của grid, đường hàng 1 ở trên cùng. Số đường tuân theo chế độ viết của tài liệu, vì vậy trong ngôn ngữ từ phải sang trái ví dụ, đường cột 1 sẽ nằm ở bên phải của grid. Hình ảnh bên dưới hiển thị số đường của grid, giả sử ngôn ngữ là từ trái sang phải.

Sơ đồ hiển thị grid với các đường được đánh số.

Các đường cũng được tạo trong grid ngầm khi các track ngầm được tạo ra để chứa nội dung được đặt bên ngoài grid tường minh, tuy nhiên các đường này không thể được địa chỉ hóa bằng số.

Đặt các phần tử lên grid theo số đường

Sau khi tạo grid, bạn có thể đặt các phần tử lên grid theo số đường. Trong ví dụ sau, phần tử được đặt từ đường cột 1 đến đường cột 3, và từ đường hàng 1 đến đường hàng 3.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

html

<div class="wrapper">
  <div class="item">Item</div>
</div>

css

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

Đặt tên cho các đường

Các đường được tạo trong grid tường minh có thể được đặt tên, bằng cách thêm tên trong dấu ngoặc vuông trước hoặc sau thông tin kích thước track. Khi đặt phần tử, bạn có thể sử dụng tên này thay vì số đường, như được minh họa bên dưới.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

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

html

<div class="wrapper">
  <div class="item">Item</div>
</div>

css

.wrapper {
  display: grid;
  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
  grid-column-start: col1-start;
  grid-column-end: col3-start;
  grid-row-start: row1-start;
  grid-row-end: rows-end;
}