Thuộc tính grid-row trong CSS
Bùi Tấn Lực - 870
- 15/10/2025
Chức năng của Thuộc tính grid-row trong CSS
Thuộc tính grid-row trong CSS kết hợp grid-row-start để chỉ định phần tử con đó bắt đầu từ hàng thứ mấy và grid-row-end để chỉ định phần tử con đó trải dọc xuống trước hàng thứ mấy hoặc trải dọc xuống chiếm mấy hàng, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con đó.
grid-row: grid-row-start / grid-row-end;
Cú pháp của Thuộc tính grid-row trong CSS
grid-row: grid-row-start / grid-row-end;
grid-row-start: Để chỉ định phần tử con đó bắt đầu từ hàng thứ mấy (Ví dụ: 1, 2).
grid-row-end: Để chỉ định phần tử con đó trải dọc xuống trước hàng thứ mấy hoặc trải dọc xuống chiếm mấy hàng, Ví dụ: 3 (trải dọc xuống trước hàng thứ 3), span 3 (trải dọc xuống chiếm 3 hàng).
Code Thuộc tính grid-row trong CSS
grid-row: 1 / 3;
Chỉ định phần tử con thứ 1 bắt đầu từ hàng 1 và trải dọc xuống trước hàng thứ 3, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 1
grid-row: 1 / 3;
Chỉ định phần tử con thứ 2 bắt đầu từ hàng 1 và trải dọc xuống trước hàng thứ 3, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 2
grid-row: 1 / span 3;
Chỉ định phần tử con thứ 1 bắt đầu từ hàng thứ 1 và trải dọc xuống chiếm 3 hàng, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 1
grid-row: 1 / span 3;
Chỉ định phần tử con thứ 2 bắt đầu từ hàng thứ 1 và trải dọc xuống chiếm 3 hàng, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 2
grid-row: 2 / span 2;
Chỉ định phần tử con thứ 2 bắt đầu từ hàng thứ 2 và trải dọc xuống chiếm 2 hàng, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 2
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-row trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px; grid-template-columns: auto auto auto auto;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Code Thuộc tính grid-row trong CSS</h1>
<p>Phía trước dấu / là grid-row-start để chỉ định phần tử con đó bắt đầu từ hàng thứ mấy, sau dấu / là grid-row-end để chỉ định phần tử con đó trải dọc xuống trước hàng thứ mấy hoặc trải dọc xuống chiếm mấy hàng, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con đó:</p>
<h4>grid-row: 1 / 3; Chỉ định phần tử con thứ 1 bắt đầu từ hàng 1 và trải dọc xuống trước hàng thứ 3, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 1</h4>
<div class="divcha">
<div style="grid-row: 1 / 3;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row: 1 / 3; Chỉ định phần tử con thứ 2 bắt đầu từ hàng 1 và trải dọc xuống trước hàng thứ 3, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-row: 1 / 3;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row: 1 / span 3; Chỉ định phần tử con thứ 1 bắt đầu từ hàng thứ 1 và trải dọc xuống chiếm 3 hàng, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 1</h4>
<div class="divcha">
<div style="grid-row: 1 / span 3;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<h4>grid-row: 1 / span 3; Chỉ định phần tử con thứ 2 bắt đầu từ hàng thứ 1 và trải dọc xuống chiếm 3 hàng, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-row: 1 / span 3;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<h4>grid-row: 2 / span 2; Chỉ định phần tử con thứ 2 bắt đầu từ hàng thứ 2 và trải dọc xuống chiếm 2 hàng, nếu không có thuộc tính chỉ định cột thì mặc định là cột 1, các phần tử con còn lại chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-row: 2 / span 2;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
Ứng dụng thuộc tính grid-row trong CSS vào bố cục thực tế
Thuộc tính grid-row phát huy hiệu quả rõ nhất khi cần kiểm soát chiều cao hoặc vị trí của một phần tử trong bố cục CSS Grid. Thay vì để các phần tử chỉ chiếm một ô mặc định, bạn có thể cho một phần tử trải dài qua nhiều hàng hoặc kết hợp với grid-column để tạo những bố cục phức tạp hơn.
Cách sử dụng này phù hợp với nhiều giao diện như danh sách sản phẩm, khu vực tin tức, trang giới thiệu hoặc các bố cục dạng thẻ cần phân chia không gian linh hoạt.
Tạo phần tử chiếm nhiều hàng trong CSS Grid
Khi một phần tử cần kéo dài theo chiều dọc, grid-row có thể xác định điểm bắt đầu và kết thúc của phần tử trên các đường kẻ của Grid. Nhờ đó, một nội dung có thể chiếm hai, ba hoặc nhiều hàng thay vì chỉ nằm trong một ô.
Ví dụ, phần tử đầu tiên được đặt từ đường hàng thứ nhất đến đường hàng thứ ba, tương đương với việc chiếm hai hàng:
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 15px;
}
.item:first-child {
grid-row: 1 / 3;
}
Cách này đặc biệt hữu ích khi muốn tạo một khối nội dung lớn nằm cạnh nhiều khối nhỏ. Bạn chỉ cần thay đổi các đường hàng trong grid-row là có thể điều chỉnh diện tích mà không phải thay đổi cấu trúc HTML.
Kết hợp grid-row với grid-column để định vị phần tử
grid-row kiểm soát vị trí theo chiều dọc, trong khi grid-column kiểm soát vị trí theo chiều ngang. Khi sử dụng đồng thời hai thuộc tính, bạn có thể xác định chính xác một phần tử nằm ở khu vực nào trong toàn bộ Grid.
Chẳng hạn, một khối có thể chiếm hai cột và hai hàng như sau:
.item {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
Thiết lập này tạo ra một vùng có kích thước lớn hơn các phần tử thông thường. Đây là cách phù hợp để xây dựng bố cục trong đó một nội dung chính được ưu tiên diện tích, còn các nội dung phụ được bố trí ở những vùng còn lại.
Sử dụng grid-row để xây dựng bố cục giao diện linh hoạt
Trong giao diện thực tế, grid-row có thể được dùng để tạo sự chênh lệch về kích thước giữa các khối nội dung. Ví dụ, một thẻ nổi bật có thể kéo dài nhiều hàng, trong khi các thẻ còn lại giữ kích thước nhỏ hơn.
Khi kết hợp với grid-template-columns, grid-template-rows và gap, bố cục có thể được điều chỉnh mà không cần thêm nhiều phần tử bao quanh. Đây cũng là ưu điểm của CSS Grid khi xây dựng các giao diện có cấu trúc rõ ràng nhưng vẫn cần khả năng thay đổi linh hoạt.
Để giao diện hoạt động tốt trên màn hình nhỏ, nên kiểm tra lại số hàng mà phần tử chiếm trong từng kích thước màn hình. Trong một số trường hợp, có thể thay đổi giá trị grid-row ở media query để tránh một khối quá cao hoặc làm mất cân đối bố cục.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính grid-row trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
