（1）grid-template-columns 定义列数和每列的宽度

• 备注：div box没有设置宽高，width默认为100%

grid-template-columns： 不设置 200px 300px 100px 200px 300px

（2）grid-template-rows 定义每一行的高度

• 备注：grid子元素没有设置宽高
• 在没有设置grid-item的高度时，高度默认填满grid网格的高度
• 因为div是块级元素，所以宽度占满父容器（即单个网格）的宽度
• 如果不设置grid-template-rows属性，则grid的行高默认为子元素的高度

grid-template-rows： 不设置 100px 50px 100px 100px 150px 200px

（3）grid-gap 行距（grid-row-gap）和列距（grid-column-gap）的简写

• 备注：grid容器设置了padding:4px;
• 参数为2位时，行距在前，列距在后
• 对grid容器边界没有影响

grid-gap： 不设置 20px 20px 40px 40px 20px

（4）place-items 网格中元素的位置，水平位置（justify-items）和垂直位置（align-items）的简写

• 备注：网格的行高为250px，列宽为1fr，子元素的宽高为150px
• 为了体现不同place-items的差异，需要将子元素的宽高设置的比网格的宽高值小
• 子元素设置了宽高的情况下，默认值stretch将失效，子元素不会拉伸；此时取而代之的默认值是start
• 参数为2位时，水平位置在前，垂直位置在后

place-items： start center end stretch（默认值） start end

• 子元素没有设置宽高的情况下，默认值为stretch，子元素将被拉伸只网格同样大小（如下所示）
• 备注：第一个子元素设置了宽高100px，其余子元素未设置宽高，网格行高为150px，列宽为1fr

（5）grid-template-areas 区域化网格

• 使用方式：容器使用 grid-template-areas 声明网格区域，子元素使用 grid-area 指定占用的网格区域
• 注意：（1）area名字需要填满所有网格
• 注意：（2）同一个area名只能出现在连续的网格中
• 注意：（3）连续网格必须组成一个正方形

（6）grid-auto-flow 容器布局流

• 划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。取值范围如下：
• （1）row（先行后列），指定列数，从左到右、从上到下填充网格元素，必要时自动增加新行
• （2）column（先列后行），指定行数，从上到下、从左到右填充网格元素，必要时自动增加新列
• （3）dense，先行后列，如果本行的剩余单元格放不下下一个元素，将试图用后面较小的子元素填补这个空白的空间

grid-auto-flow: row （需要指定列数，grid-template-columns: 1fr 1fr 1fr;）

grid-auto-flow: column （需要指定行数，列宽平均分）

行数： 两行 三行

grid-auto-flow: dense （1，2各占用两个单元格）

row（严格按顺序排列，不填充空白） dense （用较小元素填充前面留下的空白，但是可能会打乱元素次序）

返回首页