Thuộc tính grid-row-start trong CSS
Bùi Tấn Lực - 806
- 15/10/2025
Chức năng của Thuộc tính grid-row-start trong CSS
Thuộc tính grid-row-start trong CSS dùng để quy định phần tử con bắt đầu từ hàng thứ mấy hoặc quy định phần tử con chiếm mấy hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con đó.
Cú pháp của Thuộc tính grid-row-start trong CSS
grid-row-start: conso;
conso: Con số , quy định phần tử con đó bắt đầu từ hàng thứ mấy.
grid-row-start: span giatri;
giatri: Giá trị là số hàng mà phần tử con đó chiếm, tính từ hàng bắt đầu và cột bắt đầu chạy xuống
Code Thuộc tính grid-row-start trong CSS
grid-row-start:2;
Quy định phần tử con thứ 1 bắt đầu từ hàng thứ 2, các phần tử con khác chạy bình thường và không chiếm chổ phần tử con thứ 1
grid-row-start:2;
Quy định phần tử con thứ 2 bắt đầu từ hàng thứ 2, các phần tử con khác chạy bình thường và không chiếm chổ phần tử con thứ 2
grid-row-start:span 2;
Quy định phần tử con thứ 1 chiếm 2 hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con thứ 1
grid-row-start:span 2;
Quy định phần tử con thứ 2 chiếm 2 hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con thứ 2
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-row-start 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-start trong CSS</h1>
<p>Quy định phần tử con bắt đầu từ hàng thứ mấy hoặc quy định phần tử con chiếm mấy hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con đó:</p>
<h4>grid-row-start:2; Quy định phần tử con thứ 1 bắt đầu từ hàng thứ 2, các phần tử con khác chạy bình thường và không chiếm chổ phần tử con thứ 1</h4>
<div class="divcha">
<div style="grid-row-start:2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row-start:2; Quy định phần tử con thứ 2 bắt đầu từ hàng thứ 2, các phần tử con khác chạy bình thường và không chiếm chổ phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-row-start:2">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row-start:span 2; Quy định phần tử con thứ 1 chiếm 2 hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con thứ 1</h4>
<div class="divcha">
<div style="grid-row-start:span 2;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row-start:span 2; Quy định phần tử con thứ 2 chiếm 2 hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-row-start:span 2;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Những lưu ý khi sử dụng grid-row-start trong CSS
Khi bố trí phần tử trong CSS Grid, grid-row-start cho phép xác định vị trí bắt đầu của phần tử trên trục hàng. Để bố cục hoạt động đúng như mong muốn, cần chú ý cách đánh số đường kẻ và mối quan hệ giữa vị trí bắt đầu với phạm vi mà phần tử chiếm dụng.
grid-row-start với giá trị số âm trong CSS Grid
Ngoài số dương, grid-row-start có thể nhận giá trị số âm để xác định vị trí dựa từ cuối lưới. Cách này hữu ích khi không muốn phụ thuộc vào tổng số hàng hoặc khi cần đặt phần tử gần cuối Grid.
Ví dụ, với một Grid có nhiều đường kẻ theo chiều dọc, giá trị -1 trỏ đến đường kẻ cuối cùng. Giá trị -2 trỏ đến đường kẻ ngay trước đó. Nhờ vậy, có thể định vị phần tử từ cuối lưới thay vì phải tính toán vị trí từ đầu.
.item {
grid-row-start: -1;
}
Điểm cần nhớ là số âm tham chiếu đến đường kẻ, không phải số thứ tự của hàng. Vì vậy, khi thay đổi số lượng hàng hoặc cấu trúc Grid, nên kiểm tra lại vị trí thực tế để tránh phần tử bị đặt sai khu vự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-start 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 *
