通过将属性 display 的值设为 grid，HTML 元素就可以变为网格容器。 通过前面的操作，你可以对该容器使用与 CSS 网格（CSS Grid）相关的属性。

注意： 在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。

grid-template-columns

简单地添加一个网格元素并不会有任何明显的效果。 你还需要明确网格的结构。 在一个网格容器中使用 grid-template-columns 属性可以添加一些列，示例如下：

<style>
    .d1{background:LightSkyBlue;}
    .d2{background:LightSalmon;}
    .d3{background:PaleTurquoise;}
    .d4{background:LightPink;}
    .d5{background:PaleGreen;}

    .container {
        font-size: 40px;
        width: 100%;
        background: LightGray;
        display: grid;
        /* 这里设置了3列分别宽度为20 40 40*/

                grid-template-columns: 20% 40% 40%;
        /* 也可以用其它的单位 */
    }
</style>

<div class="container">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
    
</div>

image

grid-template-rows

同样，这是一个设定多少行的属性，

grid-template-rows: 30% 30%;

行和列的大小

使用 CSS 网格单位来更改列和行的大小

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

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

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

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

grid-column-gap

grid-template-columns: 20% 40% 1fr;
grid-column-gap: 10px;

就是表示每列之间的距离

image-20210906173548340

grid-row-gap

这个就是没行之间的距离，效果在上面

grid-gap

是前面2个属性的简写形式

grid-gap: 10px 20px;

第一个是行间距，第2个是列

grid-column

前面讲的都是容器的属性，现在讲的是容器内的元素

网格中，假想的水平线和垂直线被称为线（lines）。 这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。

这是一个 3x3 网格的线条：

image-20210906211229544

要设置一个网格项占据几列，你可以使用 grid-column 属性加上网格线条的编号来定义网格项开始和结束的位置。

示例如下：

.d1 {
        background: LightSkyBlue;
                grid-column: 1/3;               
    }

那么现在1元素应该占领前面2个列，如图

image-20210906211436595

grid-row

和上面一样，控制子元素占几行

.d1 {
        background: LightSkyBlue;
                grid-column: 1/3;
                grid-row: 1/3;
    }

justify-self

使用 justify-self 水平对齐项目

在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。 你可以使用网格项的 justify-self 属性，设置其内容的位置在单元格内沿水平轴的对齐方式。 默认情况下，这个属性的值是 stretch，这将使内容占满整个单元格的宽度。 该 CSS 网格属性也可以使用其他的值：

start：使内容在单元格左侧对齐，

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

end：使内容在单元格右侧对齐，

.d1 {
        background: LightSkyBlue;
                grid-column: 1/3;               
                justify-self: center;
    }

image-20210906215154951

align-self

使用 align-self 垂直对齐项目

正如能设置网格项沿水平方向的对齐方式一样，我们也可以设置网格项沿竖直方向的对齐方式。 为此，我们可以对网格项使用 align-self 属性来实现。 在上一个挑战中适用于 justify-self 属性的属性值同样也可用于这个属性。

.d1 {
        background: LightSkyBlue;
                grid-column: 1/3;
                justify-self: center;
                align-self: center;
    }

image-20210906215316626

justify-items

使用 justify-items 水平对齐所有项目

在grid容器中设置。让所有子元素统一对齐方式

 .container {
        font-size: 40px;
        width: 100%;
        height: 500px;
        background: LightGray;
        display: grid;
        grid-template-columns: 20% 40% 1fr;
        grid-template-rows: 30% 30%;
        grid-gap: 10px 20px;
        justify-items:center;
    }

image-20210906215746069

align-items

使用 align-items 垂直对齐所有项目

对网格容器使用 align-items 属性可以让网格中所有的网格项沿竖直方向对齐。

grid-template-areas

就是为每个单元个取名，然后把子元素放入格子中，只能是矩形形式

container中设置

grid-template-areas:
      "header header header"
      "advert content content"
      "footer footer footer";
  }

grid-area

在为网格添加区域模板后，可以通过引用你所定义的区域的名称，将元素放入相应的区域。 为此，你需要对网格项使用 grid-area：

.d2 {
                grid-area: content;
        background: LightSalmon;
    }

image-20210906221016612

用法2

如果网格中没有定义区域模板，你也可以像这样为它添加一个模板：

item1 { grid-area: 1/1/2/4; }

这里使用了你之前学习的网格线编号来定义网格项的区域。 上例中数字代表这些值：

grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

因此，示例中的网格项将占用第 1 条水平网格线（起始）和第 2 条水平网格线（终止）之间的行，及第 1 条垂直网格线（起始）和第 4 条垂直网格线（终止）之间的列。

如：

.item5 {
    background: PaleGreen; 
grid-area:3/1/4/4; 
  }

image-20210906222313178

repeat用法

使用 repeat 函数减少重复

使用 grid-template-columns 或 grid-template-rows 定义网格结构时，你需要为添加的每一行或每一列都输入一个值。

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

以下为添加 100 行网格的例子，每行高度均为 50px：

grid-template-rows: repeat(100, 50px);

你还可以用 repeat 方法重复多个值，并在定义网格结构时与其他值一起使用。 比如：

grid-template-columns: repeat(2, 1fr 50px) 20px;

效果相当于：

grid-template-columns: 1fr 50px 1fr 50px 20px;

注意： 1fr 50px 重复了两次，后面跟着 20px。

minmax函数

使用 minmax 函数限制项目大小

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

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

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

auto-fill

使用 auto-fill 创建弹性布局

repeat 方法带有一个名为自动填充（auto-fill）的功能。 它的功能是根据容器的大小，尽可能多地放入指定大小的行或列。 你可以通过结合 auto-fill 和 minmax 来更灵活地布局。

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

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

auto-fit

使用 auto-fit 创建弹性布局

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

注意： 如果容器宽度不足以将所有网格项放在同一行，余下的网格项将会移至新的一行。