Grid 網格佈局是一種比較新的佈局方法,幾乎能實現所有設計的佈局,比Flex佈局更強大.
但是最近將它用於畫表格時碰到了一點問題,就是關於邊框.
需求是將所有邊都加上等粗的邊框,同時內容最好能進行水平和垂直的居中.
碰到的問題:
1.使用css border,可能會造成邊框的重疊
這個能搜到解決方法,有兩個,如下:
Html中Grid佈局的邊框解法 - 簡書
html - 使用 CSS Grid 摺疊邊框 - SegmentFault 思否
2.有邊框的情況下使內容(比如文字),水平垂直居中,則邊框會緊貼內容,即收縮到內部,
不管是在容器上使用align-content: center;justify-content: center;還是在專案上使用align-self: center;justify-self: center;都會有這個問題.
暫時沒有找到其他人的解決方法,我自己想了兩個方法:
1.我現在使用的,水平居中可以使用css 的text-algin:center;垂直使用padding大概設定一下,把內容擠到中間,好處是不需要寫太多額外程式碼,css里加個class即可,缺點是不靈活,比如字型大小變了可能就偏了,也可能無法真正的居中.因為時間緊急,所以臨時使用.
2.還未測試的方法,套娃解決:即將專案內再套一個子專案,原專案也配置gride佈局.
如果大家還有更好的方法,也希望能不吝賜教.