<div class="wrapper">
  <div class="one item">One</div>
  <div class="two item">Two</div>
  <div class="three item">Three</div>
  <div class="four item">Four</div>
  <div class="five item">Five</div>
  <div class="six item">Six</div>
  <div class="seven item">Seven</div>
  <div class="eight item">eight</div>
  <div class="nine item">Nine</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: 300px 300px  300px 300px;/**几列宽度**/
  grid-gap: 20px 200px;/**垂直间距 水平间距**/
  grid-auto-rows: 100px;/**高度**/
}

.wrapper-1 {
  display: grid;
  grid-template-columns: 20px 100px 100px;/**几列宽度**/
  grid-auto-rows: 100px;/**高度**/
  grid-row-gap: 10px;/**垂直间距**/
  grid-column-gap: 500px;/**水平间距**/
}
.one {background: #19CAAD;}
.two {background: #8CC7B5;}
.three {background: #D1BA74;}
.four {background: #BEE7E9;}
.five {background: #E6CEAC;}
.six {background: #ECAD9E;}
.seven {background: #BEEDC7;}
.eight {background: #F4606C;}
.nine {background: #A0EEE1;}
.item {text-align: center;font-size: 200%;color: #fff;}

发表评论

共有 0 条评论