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

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

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

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-column-end 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-end trong CSS</h1>
<p>Sử dụng kèm với 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), sau đó dùng 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, 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;grid-column-end: 4; Quy định phần tử con thứ 2 bắt đầu từ cột thứ 2 và kết thúc tại trước cột 4 (chiếm 2 ô)</h4>
<div class="divcha">
    <div >1</div>
    <div style="grid-column-start: 2; grid-column-end: 4;">2</div>
    <div >3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<h4>grid-column-start: 1;grid-column-end: 3; Quy định phần tử con thứ 1 bắt đầu từ cột thứ 1 và kết thúc tại trước cột 3 (chiếm 2 ô)</h4>
<div class="divcha">
    <div style="grid-column-start: 1; grid-column-end: 3;">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-start: 1;grid-column-end: span 4; Quy định phần tử con thứ 3 bắt đầu từ cột thứ 1 và chiếm 4 ô (vì trước phần tử 3 có phần tử 1 chiếm cột 1 hàng 1 nên chuyển qua hàng 2)</h4>
<div class="divcha">
    <div>1</div>
    <div>2</div>
    <div style="grid-column-start: 1;grid-column-end: span 4;">3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>grid-column-start: 1;grid-column-end: span 4; Quy định phần tử con thứ 5 bắt đầu từ cột thứ 1 và chiếm 4 ô (vì trước phần tử 5 có phần tử 1 chiếm cột 1 hàng 1 nên chuyển qua hàng 2)</h4>
<div class="divcha">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div style="grid-column-start: 1;grid-column-end: span 4;">5</div>
    <div>6</div>
</div>

</body>
</html>
Code Thuộc tính grid-column-end trong CSS nằm trong bài viết Thuộc tính grid-column-end trong CSS