css grid测试
in 前端 with 0 comment

css grid测试

in 前端 with 0 comment

兼容性

微信截图_20191017152252.png

grid布局不兼容IE,据说在IOS下的支持也很差 (据说的出处

grid的优点

对于矩形的布局制作很简单,如下面这种效果用grid就很简单。

微信截图_20191017153439.png

但是如果是不规则的矩形就没办法直接制作了,如下面这种:

微信截图_20191017153651.png

grid笔记

详细的描述可以参考张鑫旭大佬的blog: 写给自己看的display: grid布局教程 « 张鑫旭-鑫空间-鑫生活,我这里只是捡出了一些常用的做下笔记

grid-template-columns和grid-template-rows中 网格分割线命名的作用

给子项的属性控制自身大小使用,有以下参数可以用到grid-column-start, grid-column-end, grid-row-start和grid-row-end

fr的计算

假设现在grid容器宽度为400px,grid-template-columns为 auto 1fr 1fr 1fr,auto列中的内容是“hello”,那么1fr的计算公式为:

fr = (400px - hello的字符长度) * 0.3333

为什么乘以0.3333解释一下 因为这里是3fr,则每等分是(400px - hello的字符长度)的三分之一。

grid的知识点

1.当你使用了grid之后,float,display:inline-block,display:table-cell,vertical-align以及column-*这些属性和声明对grid子项是没有任何作用的。

2.在IE10-IE15中使用grid需要添加-ms-前缀

3.虽然grid-template-areas和grid-area支持中文命名,但是存在页面编码导致中文出现乱码的问题

参考文档

grid - CSS(层叠样式表) | MDN
写给自己看的display: grid布局教程 « 张鑫旭-鑫空间-鑫生活

Comments are closed.