CSS Grid Lines - Đường lưới trong CSS Grid

Grid Lines là các đường ranh giới tạo nên cấu trúc lưới: Column Lines (đường dọc) và Row Lines (đường ngang). Chúng được đánh số từ 1 bắt đầu tại cạnh bắt đầu (start) của container.

Đặc điểm Grid Lines

• Đánh số: 1, 2, 3... từ start edge (trái/trên)
• Đánh số âm: -1, -2, -3... từ end edge (phải/dưới)
• Có thể đặt tên (named lines) để dễ tham chiếu
• Items đặt vị trí bằng grid-column-start/end, grid-row-start/end

Ví dụ: Grid Lines với grid-row-start/end

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: #27ae60;
      grid-template-columns: auto auto;
      padding: 20px;
      gap: 20px;
    }
    .container > div {
      background-color: #e67e22;
      border: 2px solid #95a5a6;
      padding: 35px;
      font-size: 30px;
      text-align: center;
    }
    .ele1 {
      grid-row-start: 1;
      grid-row-end: 6; /* Trải từ line 1 đến line 6 (5 hàng) */
    }
  </style>
</head>
<body>
  <h1>Game Board</h1>
  <div class="container">
    <div class="ele1">1</div>
    <div class="ele2">2</div>
    <div class="ele3">3</div>
    <div class="ele4">4</div>
    <div class="ele5">5</div>
    <div class="ele6">6</div>
  </div>
</body>
</html>

Đánh số Grid Lines

Cột:  2 cột → 3 column lines
      |  1  |     2     |  3  |
      |     |     |     |     |
Hàng: 3 hàng → 4 row lines
      1  ──────────────────
      |     |     |     |
      2  ──────────────────
      |     |     |     |
      3  ──────────────────
      |     |     |     |
      4  ──────────────────
      
Đánh số âm: -1 = line cuối, -2 = line倒数第二...

Named Grid Lines (Đặt tên lines)

.container {
  display: grid;
  grid-template-columns: 
    [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows:
    [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
}
.sidebar { grid-column: sidebar-start / sidebar-end; }
.header { grid-column: 1 / -1; grid-row: header-start / header-end; }

Shorthand: grid-column, grid-row, grid-area