Định vị phần tử theo hàng của Grid

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 32 trên 43.

Thuộc tính grid-row cho phép bạn kiểm soát vị trí theo chiều dọc của một phần tử trong CSS Grid. Thuộc tính này xác định phần tử bắt đầu và kết thúc ở hàng nào.

Trước khi bắt đầu, bạn cần hiểu sự khác nhau giữa đường lưới và rãnh lưới.

Các đường lưới là những đường phân chia (được đánh số 1, 2, 3, v.v.) tạo nên cấu trúc lưới. Một dải lưới là khoảng không gian giữa hai đường lưới liền kề, về cơ bản chính là hàng hoặc cột.

Giả sử ta có một vùng chứa đơn giản với 8 phần tử và muốn phần tử đầu tiên kéo dài từ đường hàng 1 đến đường hàng 4 trong lưới:

.item1 {
  grid-row: 1 / 4;
}

Đây là hình ảnh hiển thị:

Để trải dài qua nhiều hàng, bạn cũng có thể dùng từ khóa span:

.item2 {
  grid-row: 2 / span 2;
  background-color: lightpink;
}

Thao tác này đặt item2 bắt đầu tại đường kẻ hàng 2 và trải dài qua 2 hàng (hoặc 2 track).

Thử thách

Dễ

Dùng thuộc tính grid-row để phần tử lưới thứ tư trải dài từ đường hàng 2 đến đường hàng 4.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
}

.grid-container > div {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
  font-size: 30px;
}
/* Add your CSS styles here */

</style>
</head>
<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

</body>
</html>