Code Thuộc tính grid-column-start trong CSS

Code Thuộc tính grid-column-start trong CSS

Code Thuộc tính grid-column-start trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!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>
Code Thuộc tính grid-column-start trong CSS nằm trong bài viết Thuộc tính grid-column-start trong CSS