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