CSS 之 Grid 网格布局

1. fr 关键字

   fr 是 fraction 的缩写，表示分数。类似于 flex-grow。

   grid-template-columns: {{c}};

   {{n}}

2. auto 关键字

   由浏览器决定长度。

   grid-template-columns: {{c}};

   {{n}}

3. repeat() 函数

   可简化重复的值。第一个参数是重复次数，第二个参数是所要重复的值。

   grid-template-columns: {{c}};

   {{n}}

4. auto-fill 关键字

   自动填充。让一行或一列尽可能地容纳更多的单元格。

   本例设置了 grid-template-columns: repeat(auto-fill, 50px);

   容器宽度：{{autoFill}}px

   {{n}}

5. minmax() 函数

   产生一个长度范围，并根据可用空间进行调整。

   空间足够时取 max，空间不足时取 min。

   可与百分比（%）、fr 或其它单位一起使用。

   grid-template-columns: {{c}};

   {{n}}

简易 Grid 瀑布流示例