Bùi Tấn Lực - 100
- 14/10/2025
Bùi Tấn Lực Thuộc tính grid-column-end trong CSS quy định phần tử đó kết thúc trước cột mấy hoặc chiếm mấy cột, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính grid-column-end trong CSS
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>
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 *
