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