Thuộc tính grid-column-start trong CSS
Bùi Tấn Lực - 828
- 14/10/2025
Chức năng của Thuộc tính grid-column-start trong CSS
Thuộc tính grid-column-start trong CSS dùng để quy định phần tử con bắt đầu từ cột 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), hoặc quy định phần tử con chiếm bao nhiêu cột (phần tử con chỉ 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).
Cú pháp của Thuộc tính grid-column-start trong CSS
grid-column-start: conso;
conso: Con số , quy định phần tử con đó bắt đầu từ cột 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-start: span giatri;
giatri: Giá trị là số cột mà phần tử con đó chiếm (phần tử con chỉ 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-start trong CSS
grid-column-start: 2; Quy định phần tử con thứ 1 bắt đầu từ cột thứ 2
grid-column-start: 3; Quy định phần tử con thứ 2 bắt đầu từ cột thứ 3
grid-column-start: 1;
Quy định phần tử con thứ 2 bắt đầu từ cột thứ 1 (vì trước phần tử con thứ 2 có phần tử con chiếm cột 1 nên sẽ chuyển qua hàng tiếp theo)
grid-column-start: span 2; Quy định phần tử con thứ 1 chiếm 2 cột
grid-column-start: span 2; Quy định phần tử con thứ 2 chiếm 2 cột
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-column-start 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-start trong CSS</h1>
<p>Quy định phần tử con bắt đầu từ cột 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), hoặc quy định phần tử con chiếm bao nhiêu cột (phần tử con chỉ 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):</p>
<h4>grid-column-start: 2; Quy định phần tử con thứ 1 bắt đầu từ cột thứ 2</h4>
<div class="divcha">
<div style="grid-column-start: 2;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-column-start: 3; Quy định phần tử con thứ 2 bắt đầu từ cột thứ 3</h4>
<div class="divcha">
<div>1</div>
<div style="grid-column-start: 3;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-column-start: 1; Quy định phần tử con thứ 2 bắt đầu từ cột thứ 1 (vì trước phần tử con thứ 2 có phần tử con chiếm cột 1 nên sẽ chuyển qua hàng tiếp theo)</h4>
<div class="divcha">
<div>1</div>
<div style="grid-column-start: 1;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-column-start: span 2; Quy định phần tử con thứ 1 chiếm 2 cột</h4>
<div class="divcha">
<div style="grid-column-start: span 2;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-column-start: span 2; Quy định phần tử con thứ 2 chiếm 2 cột</h4>
<div class="divcha">
<div>1</div>
<div style="grid-column-start: span 2;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Cách sử dụng grid-column-start hiệu quả trong CSS Grid
Thuộc tính grid-column-start phát huy tác dụng rõ rệt khi cần kiểm soát vị trí của từng phần tử trong một bố cục Grid. Thay vì để trình duyệt tự sắp xếp theo thứ tự, bạn có thể chủ động xác định phần tử bắt đầu từ đường kẻ cột nào hoặc kết hợp với span để tạo vùng hiển thị phù hợp.
Đặt phần tử bắt đầu từ một cột cụ thể
Giá trị số của grid-column-start cho phép xác định chính xác đường kẻ dọc nơi phần tử bắt đầu. Chẳng hạn, đặt giá trị 2 sẽ khiến phần tử bắt đầu tại đường kẻ cột thứ hai, thay vì vị trí mặc định do Grid phân bổ.
Cách này phù hợp khi muốn tạo bố cục có khoảng trống chủ động, đưa một khối nội dung sang vị trí khác hoặc căn chỉnh các thành phần theo một cấu trúc cột đã định sẵn.
.box {
grid-column-start: 2;
}
Trong ví dụ trên, phần tử .box bắt đầu từ đường kẻ cột số 2. Phạm vi hiển thị tiếp theo vẫn phụ thuộc vào cách Grid xác định điểm kết thúc của phần tử.
Mở rộng phần tử bằng giá trị span
Ngoài số thứ tự đường kẻ, grid-column-start còn có thể kết hợp với span để xác định số cột mà phần tử cần chiếm từ vị trí bắt đầu. Đây là cách hữu ích khi bố cục cần những khối có độ rộng khác nhau.
.box {
grid-column-start: span 2;
}
Với thiết lập này, phần tử được bố trí trong phạm vi tương ứng với 2 cột tính từ vị trí mà Grid xác định. Cách viết này đặc biệt hữu ích trong các giao diện có thẻ nội dung hoặc khu vực cần mở rộng linh hoạt theo cấu trúc lưới.
Kết hợp grid-column-start với các thuộc tính CSS Grid khác
grid-column-start thường không nên được xem là thuộc tính hoạt động độc lập. Khi kết hợp với grid-column-end, bạn có thể kiểm soát đồng thời điểm bắt đầu và điểm kết thúc, từ đó xác định chính xác phạm vi cột mà phần tử sử dụng.
.box {
grid-column-start: 2;
grid-column-end: 5;
}
Phần tử trong ví dụ bắt đầu tại đường kẻ cột thứ 2 và kết thúc tại đường kẻ cột thứ 5, tương đương với việc chiếm 3 khoảng cột. Cách kết hợp này giúp bố cục dễ kiểm soát hơn khi giao diện có nhiều vùng nội dung với kích thước khác nhau.
Trong những trường hợp cần viết CSS ngắn gọn, có thể chuyển sang thuộc tính grid-column để khai báo điểm bắt đầu và kết thúc trong cùng một dòng.
.box {
grid-column: 2 / 5;
}
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính grid-column-start 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 *
