css grid测试

兼容性

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

对于矩形的布局制作很简单，如下面这种效果用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的字符长度)的三分之一。

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

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

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

repeat()函数只能作用在grid-template-columns和grid-template-rows这两个CSS属性上，目前Firefox浏览器只支持在grid-template-columns属性上使用repeat()函数。

兼容性：

用法：

repeat(重复次数 int, 重复内容 xxx xxx xxx);

支持多个repeat使用

1	grid-template-columns: repeat(3, 40px) repeat(3, 60px) auto;

支持与min-content/max-content关键字一起使用

1	grid-template-columns: repeat(2, min-content auto max-content) auto;