Html中Grid佈局的邊框解法

Html中Grid佈局的邊框解法

衆所周知，grid佈局目前得到瀏覽器的支持已經非常可觀了，它強大的功能已經成爲很多複雜佈局的首選。

同時，很多場景裏，它也成爲了table佈局的優秀替代方案。

但是很多人在使用grid代替table佈局時，卻發現了一個嚴重的問題，那就是：
邊框非常不方便！

如圖，一般情況下，我們都只能給item設置border，但渲染出來的效果嘛……

.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;
}

這樣一來，效果就完美了。