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

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

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

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