Thuộc tính grid-column trong CSS
Bùi Tấn Lực - 830
- 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>
Cách sử dụng grid-column hiệu quả trong CSS
grid-column phát huy hiệu quả khi cần kiểm soát vị trí theo chiều ngang của một phần tử trong CSS Grid. Thay vì chia đều các ô, bạn có thể chỉ định phần tử bắt đầu từ đường kẻ nào, kết thúc ở đâu hoặc chiếm bao nhiêu cột. Cách này đặc biệt hữu ích khi xây dựng bố cục có nhiều khu vực với kích thước khác nhau.
Chọn vị trí cột bằng grid-column-start và grid-column-end
grid-column-start xác định đường kẻ nơi phần tử bắt đầu, còn grid-column-end xác định đường kẻ nơi phần tử kết thúc. Hai thuộc tính này cho phép đặt một phần tử vào đúng vị trí mà không cần thay đổi thứ tự của các phần tử HTML.
Ví dụ, với một Grid có 4 cột, phần tử có thể bắt đầu tại đường kẻ số 1 và kết thúc tại đường kẻ số 3, từ đó chiếm trọn 2 cột:
.box {
grid-column-start: 1;
grid-column-end: 3;
}
Cách xác định theo đường kẻ giúp bố cục dễ kiểm soát hơn, nhất là khi các khu vực trên trang có độ rộng không đồng đều. Khi cần thay đổi vị trí, bạn chỉ việc điều chỉnh các giá trị bắt đầu và kết thúc thay vì sửa cấu trúc HTML.
Mở rộng phần tử qua nhiều cột với giá trị span
Giá trị span phù hợp khi mục tiêu là cho một phần tử chiếm một số lượng cột nhất định mà không cần quan tâm chính xác đến đường kẻ kết thúc. Đây là cách viết ngắn gọn và trực quan khi xây dựng các khối có độ rộng thay đổi.
Chẳng hạn, phần tử bắt đầu tại vị trí được Grid tự xác định và mở rộng qua 2 cột có thể viết:
.box {
grid-column: span 2;
}
Trong bố cục thực tế, span thường được dùng cho các khối có kích thước lớn hơn những phần tử còn lại như banner, nội dung nổi bật hoặc khu vực cần tạo điểm nhấn. Cách này cũng giúp mã CSS dễ đọc khi chỉ cần thể hiện rõ phần tử đang chiếm bao nhiêu cột.
Ứng dụng grid-column để tạo bố cục website linh hoạt
grid-column có thể kết hợp với hệ thống cột của CSS Grid để tạo nhiều kiểu bố cục mà không cần dùng kỹ thuật chia khối phức tạp. Một khu vực có thể chiếm 2 cột, trong khi các khu vực khác chỉ chiếm 1 cột, tạo nên sự phân cấp rõ ràng cho nội dung.
Ví dụ, một bố cục có thể dành 2 cột cho nội dung chính và 1 cột cho khu vực phụ:
.layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.content {
grid-column: span 2;
}
.sidebar {
grid-column: span 1;
}
Khi thay đổi số lượng cột của Grid, các phần tử vẫn có thể được điều chỉnh theo cùng một nguyên tắc. Nhờ đó, grid-column trở thành công cụ hữu ích để xây dựng giao diện có cấu trúc rõ ràng, dễ mở rộng và thuận tiện khi tối ưu cho nhiều kích thước màn hình.
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 *
