Thuộc tính grid-column-end trong CSS
Bùi Tấn Lực - 793
- 14/10/2025
Chức năng của Thuộc tính grid-column-end trong CSS
Thuộc tính grid-column-end trong CSS sử dụng kèm với grid-column-start để quy định phần tử con bắt đầu từ cột thứ mấy (nếu hàng hiện tại có phần tử đứng trước chiếm cột rồi thì sẽ chuyển qua hàng tiếp theo), sau đó dùng grid-column-end quy định phần tử đó kết thúc trước cột mấy hoặc chiếm mấy cột, phần tử đó chỉ nằm trên một hàng, nếu kết hợp thêm thuộc tính khác thì có thể nằm trên nhiều hàng.
Cú pháp của Thuộc tính grid-column-end trong CSS
grid-column-end: conso;
conso: Con số , quy định phần tử con đó kết thúc tại trước cột số đó, ví dụ con số là 4 thì kết thúc trước cột 4.
grid-column-end: span giatri;
giatri: Giá trị là số cột mà phần tử con đó được chiếm nhưng chỉ được phép nằm trên 1 hàng, nếu kết hợp thêm thuộc tính khác thì có thể nằm trên nhiều hàng.
Code Thuộc tính grid-column-end trong CSS
grid-column-start: 2;grid-column-end: 4;
Quy định phần tử con thứ 2 bắt đầu từ cột thứ 2 và kết thúc tại trước cột 4 (chiếm 2 ô)
grid-column-start: 1;grid-column-end: 3;
Quy định phần tử con thứ 1 bắt đầu từ cột thứ 1 và kết thúc tại trước cột 3 (chiếm 2 ô)
grid-column-start: 1;grid-column-end: span 4;
Quy định phần tử con thứ 3 bắt đầu từ cột thứ 1 và chiếm 4 ô (vì trước phần tử 3 có phần tử 1 chiếm cột 1 hàng 1 nên chuyển qua hàng 2)
grid-column-start: 1;grid-column-end: span 4; Quy định phần tử con thứ 5 bắt đầu từ cột thứ 1 và chiếm 4 ô (vì trước phần tử 5 có phần tử 1 chiếm cột 1 hàng 1 nên chuyển qua hàng 2)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-column-end 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-column-end trong CSS</h1>
<p>Sử dụng kèm với grid-column-start để quy định phần tử con bắt đầu từ cột thứ mấy (nếu hàng hiện tại có phần tử đứng trước chiếm cột rồi thì sẽ chuyển qua hàng tiếp theo), sau đó dùng grid-column-end quy định phần tử đó kết thúc trước cột mấy hoặc chiếm mấy ô, phần tử đó chỉ nằm trên một hàng, nếu kết hợp thêm thuộc tính khác thì có thể nằm trên nhiều hàng:</p>
<h4>grid-column-start: 2;grid-column-end: 4; Quy định phần tử con thứ 2 bắt đầu từ cột thứ 2 và kết thúc tại trước cột 4 (chiếm 2 ô)</h4>
<div class="divcha">
<div >1</div>
<div style="grid-column-start: 2; grid-column-end: 4;">2</div>
<div >3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<h4>grid-column-start: 1;grid-column-end: 3; Quy định phần tử con thứ 1 bắt đầu từ cột thứ 1 và kết thúc tại trước cột 3 (chiếm 2 ô)</h4>
<div class="divcha">
<div style="grid-column-start: 1; grid-column-end: 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>
<h4>grid-column-start: 1;grid-column-end: span 4; Quy định phần tử con thứ 3 bắt đầu từ cột thứ 1 và chiếm 4 ô (vì trước phần tử 3 có phần tử 1 chiếm cột 1 hàng 1 nên chuyển qua hàng 2)</h4>
<div class="divcha">
<div>1</div>
<div>2</div>
<div style="grid-column-start: 1;grid-column-end: span 4;">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-column-start: 1;grid-column-end: span 4; Quy định phần tử con thứ 5 bắt đầu từ cột thứ 1 và chiếm 4 ô (vì trước phần tử 5 có phần tử 1 chiếm cột 1 hàng 1 nên chuyển qua hàng 2)</h4>
<div class="divcha">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div style="grid-column-start: 1;grid-column-end: span 4;">5</div>
<div>6</div>
</div>
</body>
</html>
Cách kết hợp grid-column-end với các thuộc tính CSS Grid khác
grid-column-end phát huy hiệu quả rõ rệt hơn khi được sử dụng cùng các thuộc tính xác định vị trí khác trong CSS Grid. Cách kết hợp phù hợp giúp kiểm soát điểm bắt đầu, điểm kết thúc và phạm vi chiếm cột của từng phần tử mà không cần thay đổi cấu trúc HTML.
Kết hợp grid-column-end với grid-column-start
grid-column-start xác định đường lưới nơi phần tử bắt đầu, còn grid-column-end xác định đường lưới nơi phần tử kết thúc. Khi dùng cùng nhau, bạn có thể kiểm soát chính xác phần không gian mà một phần tử chiếm trong Grid.
Ví dụ, phần tử bắt đầu từ đường cột thứ 2 và kết thúc tại đường cột thứ 5 sẽ chiếm ba cột:
.item {
grid-column-start: 2;
grid-column-end: 5;
}
Cách này phù hợp khi cần đặt một phần tử vào vị trí cụ thể thay vì chỉ quy định số lượng cột mà nó chiếm.
Kết hợp grid-column-end với grid-column
grid-column là thuộc tính viết tắt cho grid-column-start và grid-column-end. Vì vậy, bạn có thể dùng grid-column để khai báo nhanh phạm vi cột thay cho việc viết riêng từng thuộc tính.
.item {
grid-column: 2 / 5;
}
Đoạn mã trên có cùng ý nghĩa với việc đặt grid-column-start là 2 và grid-column-end là 5. Cách viết này ngắn gọn, dễ đọc và thuận tiện khi vị trí của phần tử đã được xác định rõ.
Kết hợp grid-column-end với grid-area
grid-area cho phép xác định vùng mà phần tử chiếm trong Grid thông qua các đường hàng và đường cột. Khi bố cục có nhiều thành phần, cách này giúp quản lý vị trí tổng thể linh hoạt hơn so với chỉ sử dụng riêng grid-column-end.
.item {
grid-area: 1 / 2 / 3 / 5;
}
Trong đó, các giá trị lần lượt xác định điểm bắt đầu của hàng, điểm bắt đầu của cột, điểm kết thúc của hàng và điểm kết thúc của cột. Nhờ vậy, một phần tử có thể được định vị theo cả chiều ngang lẫn chiều dọc trong cùng một khai báo.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính grid-column-end 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 *
