CSS网格（CSS Grid）_m0_56504343

网络 02-07 6262

CSS 网格是一个较新的标准，用于构建复杂的响应布局。它通过把 HTML 元素转换为具有行和列的网格容器，以便将子元素放置在所需要的位置。

1. dispaly: grid;

?2. grid-template-columns，grid-template-rows

?3. 改变行和列的大小

?4.grid-column-gap，grid-row-gap，grid-gap

?5. grid-column，grid-row

?6.? justify-self，align-self，justify-items，align-items

?7. grid-template-area，grid-area

?8. repeat

9. minmax

?10. auto-fill

?11. auto-fit

1. dispaly: grid;

通过将属性display的值设为grid，HTML 元素就可以变为网格容器。

?得到的结果：

?2. grid-template-columns，grid-template-rows

使用grid-template-columns添加多列，例如 grid-template-columns: 200px 200px; 会使网格中添加两列，每列的宽度都为200px

使用grid-template-rows添加多行，例如 grid-template-rows: 100px 100px; 会使网格中添加两行，每行的长度都为100px

?得到的结果：

?3. 改变行和列的大小

在 CSS 网格中，可以使用绝对单位（如px）或相对单位（如em）来定义行或列的大小。下面的单位也可以使用：

fr：设置列或行占剩余空间的比例，

auto：设置列宽或行高自动等于它的内容的宽度或高度，

%：将列或行调整为它的容器宽度或高度的百分比，

例如：grid-template-columns: auto 50px 10% 1fr 2fr; 第一列的宽与他的内容相同，第二列的宽是50px，第三列的宽是父元素的10%，将剩余空间分成三份，第四列占其中一份，第五列占两份

得到的结果是：

?4.grid-column-gap，grid-row-gap，grid-gap

给行之间或列之间添加间隔，例如 grid-column-gap: 10px; 就是为我们创建的列之间都添加10px的间隔，grid-gap将两个都包含在内，第一个数据表示行间距，第二个表示列间距，例如 grid-gap:

10px 20px; 表示行间距为10px，列间距为20px；

得到的结果是：

?5. grid-column，grid-row

这两个属性用于网格本身，网格中，假想的水平线和垂直线被称为线（lines）。这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。表示方法 grid-column: 其实线 / 结束线; 例如：grid-column: 1 / 3; 就表示从第一条线到第三条线的位置为一个列；

得到的结果是（涂鸦的数字及线就表示上面定义的线）：

?6.? justify-self，align-self，justify-items，align-items

在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。你可以使用网格项的justify-self属性，设置其内容的位置在单元格内沿水平轴的对齐方式（水平对齐），

align-self属性，设置其内容的位置在单元格内沿垂直轴的对齐方式（垂直对齐）。

justify-items，align-items设置的是所有的列或行的对齐方式。

默认情况下，属性的值是stretch，这将使内容占满整个单元格的宽度。还有其他的值：

start：使内容在单元格左侧（顶部）对齐，

center：使内容在单元格居中对齐，

end：使内容在单元格右侧（底部）对齐，

得到的结果是：

?7. grid-template-area，grid-area

你可以将网格中的一些单元格组合成一个区域（area），并为该区域指定一个自定义名称。可以通过给容器加上grid-template-areas来实现，在为网格添加区域模板后，可以通过引用你所定义的区域的名称，用grid-area将元素放入相应的区域。下面的例子中给d1命名为header，他就将占据最顶部的整行

得到的结果：?

?8. repeat

使用grid-template-columns或grid-template-rows定义网格结构时，你需要为添加的每一行或每一列都输入一个值。如果一个网格共有 100 行且每行高度相同，那我们就需要输入 100 个值，这显然不太实际。为此，更好的方式是使用repeat方法指定行或列的重复次数，后面加上逗号以及需要重复的值。

例如：grid-template-rows: repeat(100, 50px); 为添加 100 行网格的例子，每行高度均为 50px。

grid-template-rows: repeat(2, 1fr 10px)? 20px; 等价于?grid-template-rows: 1fr 10px?1fr 10px 20px;

1fr和10px重复两次

9. minmax

此外，内置函数minmax也可用于设置grid-template-rows和grid-template-columns的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，你需要指定网格项允许的尺寸范围。

grid-template-columns: 100px minmax(50px, 200px);

?在上面的代码中，我们通过grid-template-columns添加了两列，第一列宽度为 100px，第二列宽度最小值是 50px，最大值是 200px。

?10. auto-fill

repeat 方法带有一个名为自动填充（auto-fill）的功能。它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。

repeat(auto-fill, minmax(60px, 1fr));

上面的代码效果是这样：首先，列的宽度会随容器大小改变。其次，只要容器宽度不足以插入一个宽为 60px 的列，当前行的所有列就都会一直拉伸。请自己调整宽度，动手试一下就不难理解了。?注意：?如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。?

?11. auto-fit

auto-fit效果几乎和auto-fill一样。不同点仅在于，当容器的大小大于各网格项之和时，auto-fill会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而auto-fit则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。注意：?如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行