CSS Grid 网格布局边框设置
Grid 网格布局是一种比较新的布局方法,几乎能实现所有设计的布局,比Flex布局更强大.
但是最近将它用于画表格时碰到了一点问题,就是关于边框.
需求是将所有边都加上等粗的边框,同时内容最好能进行水平和垂直的居中.
碰到的问题:
1.使用css border,可能会造成边框的重叠
这个能搜到解决方法,有两个,如下:
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布局.
如果大家还有更好的方法,也希望能不吝赐教.
