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

fnatzsnv 于 2023-05-02 发布在其他

关注(0)|答案(1)|浏览(215)

在下面的例子中，我想以相等的空间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>

css

来源：https://stackoverflow.com/questions/76083726/how-to-equaly-distribute-columns-inside-a-css-grid

1条答案

按热度按时间

quhf5bfb1#

如果我没理解错的话你要找的是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>

赞(0）回复(0）举报 2023-05-02

我来回答

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

1条答案

相关问题

热门标签

最新问答