Html中Grid布局的边框解法

Html中Grid布局的边框解法

众所周知，grid布局目前得到浏览器的支持已经非常可观了，它强大的功能已经成为很多复杂布局的首选。

同时，很多场景里，它也成为了table布局的优秀替代方案。

但是很多人在使用grid代替table布局时，却发现了一个严重的问题，那就是：
边框非常不方便！

如图，一般情况下，我们都只能给item设置border，但渲染出来的效果嘛……

01.jpg

.container{
    display: grid;
}
.container .item{
    border: 1px solid black
}

效果极其难受，因为每个item都拥有本身的border，这样一来有的地方2px，有的地方1px。

那么应该怎么做呢？
其实很简单，两行css，如下

.container{
    display: grid;
}
.container .item{
    border: 1px solid black;
    margin-left: -1px;
    margin-top: -1px;
}

这样一来，效果就完美了。

02.jpg