如何在 css 网格中均匀分布列？

Question

在下面的示例中，我想以相等的空间水平分布蓝色和绿色列

between

和

around

它们

我尝试了

justify-content

和

align-items

的各种组合 - 但没有成功

求助

.cols{
width:calc(100% - 30px);
margin:0 auto;
display:grid;
grid-template-columns:340px 140px;
background:lightblue;
height:90vh;
}

.cola{background:blue;}
.colb{background:green;}

<div class='cols'>
<div class='cola'></div>
<div class='colb'></div>
</div>

Answer 1

如果我没理解错的话，你在找

justify-content: space-evenly

.

.cols {
  width: calc(100% - 30px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 140px;
  background: lightblue;
  height: 90vh;
  justify-content: space-evenly;
}

.cola {
  background: blue;
}

.colb {
  background: green;
}

<div class='cols'>
  <div class='cola'></div>
  <div class='colb'></div>
</div>