Thuộc tính grid-column trong CSS
Bùi Tấn Lực - 185
- 14/10/2025
Thuộc tính grid-column trong CSS kết hợp thuộc tính grid-column-start và thuộc tính grid-column-end để quy định vị trí và diện tích phần tử con, chi tiết như nào hãy cùng chúng tôi phân tích:
Chức năng của Thuộc tính grid-column trong CSS
Thuộc tính grid-column trong CSS kết hợp 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) và kết hợp 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.
Cú pháp của Thuộc tính grid-column trong CSS
grid-column: grid-column-start / grid-column-end;
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).
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.
Code Thuộc tính grid-column trong CSS
grid-column: 1 / 4;
Quy định phần tử con thứ 1 bắt đầu từ cột 1 và kết thúc tại trước cột 4 (chiếm 3 ô)
grid-column: 1 / 3;
Quy định phần tử con thứ 2 bắt đầu từ cột 1 và kết thúc tại trước cột 3 (chiếm 2 ô), vì trước phần tử con thứ 2 có phần tử con chiếm cột 1 rồi nên nó chuyển qua hàng tiếp theo
grid-column: 3 / span 2; Quy định phần tử con thứ 3 bắt đầu từ cột 3 chiếm 2 ô
grid-column: 1 / span 3;
Quy định phần tử con thứ 3 bắt đầu từ cột 1 và chiếm 3 ô, vì trước phần tử con thứ 3 có phần tử con chiếm cột 1 rồi nên nó chuyển qua hàng tiếp theo
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-column 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 trong CSS</h1>
<p>Trước dấu / là 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), phía sau dấu / là 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:</p>
<h4>grid-column: 1 / 4; Quy định phần tử con thứ 1 bắt đầu từ cột 1 và kết thúc tại trước cột 4 (chiếm 3 ô)</h4>
<div class="divcha">
<div style="grid-column: 1 / 4;">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: 1 / 3; Quy định phần tử con thứ 2 bắt đầu từ cột 1 và kết thúc tại trước cột 3 (chiếm 2 ô), vì trước phần tử con thứ 2 có phần tử con chiếm cột 1 rồi nên nó chuyển qua hàng tiếp theo</h4>
<div class="divcha">
<div>1</div>
<div style="grid-column: 1 / 3;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<h4>grid-column: 3 / span 2; Quy định phần tử con thứ 3 bắt đầu từ cột 3 chiếm 2 ô</h4>
<div class="divcha">
<div>1</div>
<div>2</div>
<div style="grid-column: 3 / span 2;">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-column: 1 / span 3; Quy định phần tử con thứ 3 bắt đầu từ cột 1 và chiếm 3 ô, vì trước phần tử con thứ 3 có phần tử con chiếm cột 1 rồi nên nó chuyển qua hàng tiếp theo</h4>
<div class="divcha">
<div>1</div>
<div>2</div>
<div style="grid-column: 1 / span 3;">3</div>
<div>4</div>
<div>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 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 *
