Thuộc tính grid-column-start trong CSS
Bùi Tấn Lực - 170
- 14/10/2025
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 hoặc chiếm bao nhiêu cột, 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-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>
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 *
