Bố cục lưới CSS: Từ khóa Span

---

Nếu bạn đang đặt các mục trên lưới mẹ của chúng bằng lưới-cột hoặc hàng lưới , bạn có thể sử dụng từ khóa span để tránh chỉ định các dòng kết thúc khi các mục phải kéo dài nhiều hơn một cột hoặc hàng.

Đưa ra luật CSS sau cho một mục lưới, kéo dài 3 cột và 2 hàng:

.item {
  grid-column: 2 / 5;
  grid-row: 1 / 3;
}

Thay vào đó, ta có thể sử dụng từ khóa span như thế này:

.item {
  grid-column: 2 / span 3;
  grid-row: 1 / span 2;
}

Dòng kết thúc có thể được cung cấp và sử dụng khoảng cách làm dòng bắt đầu thay thế, trong trường hợp đó, khoảng cách hoạt động ngược lại, do đó, điều sau cũng tương đương:

.item {
  grid-column: span 3 / 5;
  grid-row: span 2 / 3;
}

---

Nếu nhiều dòng có cùng tên, bạn có thể xác định dòng bắt đầu và dòng kết thúc như trong ví dụ sau:

.item {
  grid-column: col 2 / col 7;
  grid-row: content 6 / content 10;
}

Mục bắt đầu trên cột với dòng thứ 2 có tên là col và kết thúc ở dòng thứ 7 cũng có tên là col . Tương tự như vậy, nó bắt đầu vào dòng tên hàng thứ 6 và kết thúc trên dòng 10 tên hàng.

Và ở đây, từ khóa span cũng có thể trợ giúp, và điều sau là tương đương:

.item {
  grid-column: col 2 / span col 5;
  grid-row: content 6 / span content 4;
}

---

Span cũng được dùng với thuộc tính vùng lưới . Ví dụ: nếu ta muốn một mục được đặt tự động nhưng kéo dài trên một số hàng và cột đã cho:

.item {
  grid-area: span 6 / span 4;
}

---

---

Các tin liên quan

Bố cục lưới CSS: Giới thiệu
2016-12-15
Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS
2016-12-10
Tham chiếu bộ chọn CSS
2016-08-18
The: not Pseudo-Class trong CSS
2016-07-06
Hàm CSS attr ()
2016-06-20
Radial Gradients trong CSS
2016-06-13
Ngữ pháp tuyến tính trong CSS
2016-06-12
CSS: so khớp () Pseudo-Class
2016-06-02
Giới thiệu ngắn gọn về các biến CSS (Thuộc tính tùy chỉnh)
2016-06-01