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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,792評論 1 92
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進行樣式設定的標簽(元素)”。 有若干種形式的...
    寵辱不驚丶歲月靜好閱讀 1,617評論 0 6
  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現在,利用CSS3的Transform,...
    kiddings閱讀 3,195評論 0 11
  • 公眾號:今天不想說話 通宵兩天之后,我終于完成了本學期最重要的一個課設,總感覺為優化算法抓頭發的夜晚再也不會有了。...
    一只肥兔子閱讀 274評論 0 3
  • 淅淅瀝瀝 是傍晚的天氣 有許多事要做 但我還是能在各種間隙里想 你在干什么呢 其實我知道答案 至少一切都是與我無關...
    付馥馥閱讀 132評論 0 0