grid网格布局--grid-template-columns: repeat()
2021年03月12日
661
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;
}