Thuộc tính grid-template-rows trong CSS Grid

Thuộc tính grid-template-rows dùng để định nghĩa số lượng và kích thước các hàng (rows) trong CSS Grid Layout.

Cú pháp

.container {
  display: grid;
  grid-template-rows: <kích thước hàng 1> <kích thước hàng 2> ...;
}

Các giá trị có thể là: đơn vị độ dài (px, em, rem), phần trăm (%), fr (fraction), auto, min-content, max-content, hoặc hàm minmax().

Ví dụ cơ bản

Tạo grid với 2 hàng có chiều cao cố định:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: grid;
      background-color: #3498db;
      grid-template-rows: 70px 190px;
      padding: 20px;
      gap: 20px;
    }
    .container > div {
      background-color: #e67e22;
      border: 2px solid #95a5a6;
      padding: 35px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Bàn cờ Game</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>

Ví dụ với đơn vị fr và minmax()

.container {
  display: grid;
  grid-template-rows: 1fr 2fr minmax(100px, 300px) auto;
  height: 600px;
}

Giải thích:

• 1fr, 2fr: Chia không gian còn lại theo tỷ lệ 1:2
• minmax(100px, 300px): Hàng tối thiểu 100px, tối đa 300px
• auto: Kích thước dựa trên nội dung

Kết hợp với grid-template-columns

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

Tạo layout cổ điển: sidebar cố định, nội dung chính linh hoạt, header/footer tự động.