Thuộc tính grid-template-columns repeat trong CSS

Trình soạn thảo - Thuộc tính grid-template-columns repeat trong CSS

Kết quả - Thuộc tính grid-template-columns repeat trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-columns repeat 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;}
.divcha div {background:green; color:#fff; text-align: center;
  padding: 20px 0;
  font-size: 15px;}
</style>
</head>
<body>

<h1>Thuộc tính grid-template-columns repeat trong CSS</h1>
<p>Cột bên trái dấu phẩy là số lần lặp số cột có bên phải, bên phải dấu phẩy là số cột cần lặp và mỗi cột có quy định kích thước chiều rộng:</p>
<h4>Lặp 2 lần của 2 cột trên 1 hàng</h4>
<div class="divcha" style="grid-template-columns: repeat(2, 60px 100px);">
	<div>repeat(2, 60px 100px);</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>Lặp 3 lần của 2 cột trên 1 hàng</h4>
<div class="divcha" style="grid-template-columns: repeat(3, 60px 100px);">
	<div>repeat(3, 60px 100px);</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>Lặp 2 lần của 3 cột trên 1 hàng</h4>
<div class="divcha" style="grid-template-columns: repeat(2, 60px 70px 80px );">
	<div>repeat(2, 60px 70px 80px );</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

</body>
</html>