Gộp hàng trong CSS Grid

Các hàng và cột trong grid tạo thành một lưới. Có thể làm cho một phần tử chiếm không phải một ô lưới mà là nhiều ô.

Để một phần tử chiếm nhiều hơn một hàng, cần đặt cho nó thuộc tính grid-row. Trong thuộc tính này, các số được chỉ định bằng dấu gạch chéo, cho biết vị trí bắt đầu và kết thúc của các phần tử trong grid.

Khi đó, phần tử sẽ kéo dài từ vị trí đầu tiên đến vị trí thứ hai (không bao gồm nó). Tức là giá trị 1 / 2 sẽ khiến phần tử chiếm ô đầu tiên, còn giá trị 1 / 3 sẽ khiến phần tử chiếm ô thứ nhất và thứ hai (nhưng không bao gồm ô thứ ba).

Ví dụ

Giả sử chúng ta có một grid với ba phần tử con. Hãy sắp xếp chúng sao cho phần tử đầu tiên chiếm hai hàng:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 3; /* hai hàng */
}
#elem2 {
  grid-row: 1 / 2;
}
#elem3 {
  grid-row: 2 / 3;
}

Результат:

Ví dụ

Bây giờ hãy chỉ định cho phần tử thứ tư ba hàng:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 300px;
  width: 400px;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
}
#elem4 {
  grid-row: 1 / 4;
}

Результат:

Bài tập thực hành