grid布局内容居中

孙泽辉

发布于：2021年5月25日

字数：446字

时长：1分钟

次浏览

今天写css差点崩溃，万般无奈之时只好瞎写，在瞎写过后竟然跑起来了，遂记录一下

最初是想模仿这个页面写出来个选择充值金额的按钮布局：

长得好像单元格啊，正好试试新的布局方案grid

说干就干！写出来行列宽高，加上间隔：

.recharge .btns{
  margin:40rpx auto; // ?????? 左右居中不生效
  display: grid;
  grid-template-rows: repeat(2,120rpx);
  grid-template-columns: repeat(3,33.33%);
  grid-column-gap: 30rpx;
  grid-row-gap: 30rpx;
}

写出来的效果：

左边的间隔是给.recharge设置的95%的宽度，margin: 0 auto，这种代码写多了的我一眼就发现是因为按钮太大了，上面宽度95%不够用，按钮的宽度不能写死，好吧，换百分比，三个按钮一个按钮33.33%：

还是不行，我直接黑人问号 ？？

难道是间隔的问题，30rpx的间隔算到内容盒的宽度里了？

把列的间隔给禁用了，还真的是算到内容盒里了（整个内容的宽度变回了95%，margin：0 auto也居中了），但是间隔没了，这可愁坏我了，百度搜搜具体语法吧，重学！

哎，有个整个网格的水平对齐方式 ：justify-content:center;

貌似每个button设个固定宽度就可以解决问题了，但是为了响应的得到宽度，就得用百分比宽度，现在间隔还算在了内容盒，所以我就要把多出来的间隔给减去，calc就派上用场了，每个元素的宽度 = 33.33% - 间隔：但是这样的话第一个盒子默认没有间隔，间隔都是加在右边的，正好配合justify-content:center;整体居中：

成功解决居中问题！