css 网格布局简单应用

将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。

grid ：网格项目按行排列，网格项目占用整个容器的宽度。

inline-grid ：网格项目按行排列，网格项目宽度由自身宽度决定。

属性grid-template-rows和grid-template-columns用于显示定义网格，分别用于定义行轨道和列轨道。

单位fr用于表示轨道尺寸配额，表示按配额比例分配可用空间。单位fr和其它长度单位混合使用时，fr的计算基于其它单位分配后的剩余空间。

grid { display: grid; grid-template-columns: 1fr 1fr 2fr； ｝

函数minmax()用于定义轨道最小/最大边界值。

函数minmax()接收两个参数：第一个参数表示最小轨道尺寸，第二个参数表示最大轨道尺寸。长度值可以是auto，表示轨道尺寸可以根据内容大小进行伸长或收缩。

本例中，第一行最小高度设置成100px，但是最大高度设置成auto，表示行高可以根据内容伸长超过100px。

本例中，第一列宽度的最大值设置成50%，表示其宽度不能超过整个容器宽度的50%。

grid { display: grid; grid-template-rows: minmax(100px, auto); grid-template-columns: minmax(auto, 50%) 1fr 3em; ｝

函数repeat()用来定义重复的网格轨道，尤其适用于有多个相同项目的情况下。

函数repeat()接收两个参数：第一个参数表示重复的次数，第二个参数表示轨道尺寸。

grid { display: grid; grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(3, 1fr); ｝

属性grid-column-gap 和 grid-row-gap用于定义网格间隙。

网格间隙只创建在行列之间，项目与边界之间无间隙。

grid { display: grid; grid-row-gap: 20px; grid-column-gap: 5rem; ｝