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
网友评论