Code Thuộc tính grid-row-start trong CSS
Code Thuộc tính grid-row-start trong CSS
Code Thuộc tính grid-row-start trong CSS
Tự code rồi chạy thử...
Chạy Thử
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-row-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-row-start trong CSS</h1>
<p>Quy định phần tử con bắt đầu từ hàng thứ mấy hoặc quy định phần tử con chiếm mấy hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con đó:</p>
<h4>grid-row-start:2; Quy định phần tử con thứ 1 bắt đầu từ hàng thứ 2, các phần tử con khác chạy bình thường và không chiếm chổ phần tử con thứ 1</h4>
<div class="divcha">
<div style="grid-row-start:2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row-start:2; Quy định phần tử con thứ 2 bắt đầu từ hàng thứ 2, các phần tử con khác chạy bình thường và không chiếm chổ phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-row-start:2">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row-start:span 2; Quy định phần tử con thứ 1 chiếm 2 hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con thứ 1</h4>
<div class="divcha">
<div style="grid-row-start:span 2;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row-start:span 2; Quy định phần tử con thứ 2 chiếm 2 hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-row-start:span 2;">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-row-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-row-start trong CSS</h1>
<p>Quy định phần tử con bắt đầu từ hàng thứ mấy hoặc quy định phần tử con chiếm mấy hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con đó:</p>
<h4>grid-row-start:2; Quy định phần tử con thứ 1 bắt đầu từ hàng thứ 2, các phần tử con khác chạy bình thường và không chiếm chổ phần tử con thứ 1</h4>
<div class="divcha">
<div style="grid-row-start:2">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row-start:2; Quy định phần tử con thứ 2 bắt đầu từ hàng thứ 2, các phần tử con khác chạy bình thường và không chiếm chổ phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-row-start:2">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row-start:span 2; Quy định phần tử con thứ 1 chiếm 2 hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con thứ 1</h4>
<div class="divcha">
<div style="grid-row-start:span 2;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-row-start:span 2; Quy định phần tử con thứ 2 chiếm 2 hàng từ hàng bắt đầu và cột bắt đầu chạy xuống, các phần tử khác chạy bình thường và không chiếm chổ phần tử con thứ 2</h4>
<div class="divcha">
<div>1</div>
<div style="grid-row-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-row-start trong CSS nằm trong bài viết Thuộc tính grid-row-start trong CSS
