Thuộc tính grid-column trong CSS
Bùi Tấn Lực - 821
- 14/10/2025
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
Bùi Tấn Lực
Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ
Chia sẻ nội dung đánh giá của bạn về Thuộc tính grid-column trong CSS
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 *
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 *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
