×

Cách sử dụng grid-template-rows - Định nghĩa các hàng trong lưới

Avatar of admin
admin 0 Views

CSS Grid Layout là một trong những công cụ mạnh mẽ nhất hiện nay giúp phát triển giao diện web một cách dễ dàng và linh hoạt. Một trong những thuộc tính quan trọng trong việc làm chủ CSS Grid là grid-template-rows. Thuộc tính này giúp định nghĩa các hàng trong lưới, cho phép nhà phát triển quyết định cách các hàng này được sắp xếp và hiển thị. Cùng tìm hiểu chi tiết cách sử dụng thuộc tính này để tạo nên giao diện hoàn chỉnh và tương thích.

Cơ Bản Về grid-template-rows

Thuộc tính grid-template-rows được sử dụng để xác định chiều cao của các hàng trong lưới CSS Grid. Bạn có thể định nghĩa chiều cao này bằng các giá trị như pixel (px), phần trăm (%), đơn vị viewport (vh) hoặc thậm chí là các ký tự đặc biệt như fr để thể hiện tỷ lệ.

Cú pháp:

grid-template-rows: <track-size> ... ;

Các Giá Trị Phổ Biến

  1. Pixel (px): Xác định chiều cao cố định cho các hàng.

    grid-template-rows: 100px 200px 150px;

  2. Phần Trăm (%): Xác định chiều cao dựa trên tỷ lệ của chứa khối.

    grid-template-rows: 20% 30% 50%;

  3. Đơn vị fr: Đơn vị fr (fraction) đại diện cho một phần chia của không gian còn lại. Việc sử dụng fr giúp bạn phân chia không gian linh hoạt hơn.

    grid-template-rows: 1fr 2fr 1fr;

  4. Auto: Chiều cao của hàng sẽ tự động điều chỉnh dựa trên nội dung bên trong.

    grid-template-rows: auto 1fr auto;

  5. Minmax(min, max): Đảm bảo chiều cao của hàng không nhỏ hơn giá trị tối thiểu và không lớn hơn giá trị tối đa.

    grid-template-rows: minmax(100px, 300px) 1fr;

Sử Dụng grid-template-rows Trong Thực Tế

Dưới đây là một ví dụ cụ thể về cách sử dụng grid-template-rows để tạo một bố cục lưới cơ bản:

HTML:

<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>

CSS:

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px auto 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.grid-container > div {
  background-color: lightgrey;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
}

Trong ví dụ trên, container grid-container có bố cục lưới với 4 hàng. Hàng đầu tiên có chiều cao cố định là 100px, hàng thứ hai là 200px, hàng thứ ba tự động điều chỉnh dựa trên nội dung và hàng cuối cùng chiếm phần còn lại của không gian theo tỷ lệ 1fr.

Nâng Cao: Kết Hợp Với Các Thuộc Tính Khác

Bạn có thể kết hợp grid-template-rows với các thuộc tính khác như grid-auto-rows, line-height, align-items, và justify-items để tạo sự chỉnh chu hơn cho bố cục.

Ví dụ, kết hợp với grid-auto-rows:

.grid-container {
  display: grid;
  grid-template-rows: 100px 200px;
  grid-auto-rows: 150px;
}

Trong trường hợp này, nếu bạn thêm nhiều phần tử hơn vào lưới mà không định nghĩa chiều cao cụ thể cho các hàng bổ sung, CSS Grid sẽ tự động áp dụng grid-auto-rows: 150px cho các hàng đó.

Kết Luận

Thuộc tính grid-template-rows là một công cụ mạnh mẽ giúp bạn định nghĩa và kiểm soát chiều cao của các hàng trong lưới CSS Grid hiệu quả. Khi sử dụng thành thạo, bạn có thể tạo ra những bố cục phức tạp nhưng vẫn giữ được sự linh hoạt và dễ bảo trì cho giao diện web của bạn. Hãy thử áp dụng các ví dụ và thực hành nhiều để làm chủ thuộc tính này.

Comments

Bài viết liên quan