grid网格布局--grid-template-columns: repeat()

grid网格布局--grid-template-columns: repeat()

html:

<div class="container">
<div class="col">220</div>
<div class="col">30</div>
<div class="col">220</div>
<div class="col">30</div>
</div>

css:

.container{
width: 500px;
margin: 50px auto;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
display: grid;
/* 按照100 和 20 这样 划列，重复2次 */
grid-template-columns: repeat(2,220px 30px);
grid-template-rows: 100px;
}
.col{
border-right: 1px solid black;
}