在 CSS 网格布局中，我们可以有很多种方法将网格项目明确的放置到指定的位置。比如：

• 使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 指定网格线名称，放置网格项目
• 使用 grid-row-start、grid-row-end、grid-column-start 和 grid-column-end 的简写属性 grid-row 和 grid-column 指定网格线名称，放置网格项目
• 使用 grid-area 指定网格名称 或 指定grid-template-areas定义的网格区域名称，放置网格项目
• 在 grid-row-start、grid-row-end、grid-column-start、grid-column-end 或 grid-row、grid-column 指定网格线名称，并且使用 span 来指定合并的网格单元格。他们的结合来放置网格项目
• 在 grid-row-start、grid-row-end、grid-column-start、grid-column-end（以及其简写属性grid-row、grid-column）或 grid-area中指定 grid-template-rows、grid-template-columns 和 grid-template-areas 定义的网格线名称，放置网格项目
• 使用已命名的网格线名称和 span 关键词，放置网格项目
• 在grid-area指定grid-template-areas或 grid-template-rows和grid-template-columns创建的网格区域名称，放置网格项目

示例代码如下：

// 方法一
.grid__item {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;

    // 等同于
    grid-column-start: 2;
    grid-row-start: 2;
}

// 方法二
.grid__item {
    grid-row: 2 / 4;    // ᐅ row-start / row-end;
    grid-column: 2 / 4; // ᐅ col-start / col-end;
}

// 方法三
.grid__item {
    grid-area: 2 / 2 / 4 / 4; // ᐅ row-start / col-start / row-end / col-end;
}

// 方法四
.grid__item {
    grid-row:  1 / span 2;      // ᐅ row-start / span row-span-value;
    grid-column:  1 / span 2;   // ᐅ col-start / span col-span-value;
}

// 方法五
.grid__item {
    grid-column: head-col-start / head-col-end;
    grid-row: content-row-end / footer-row-end;
}

// 方法六
.grid__item {
    grid-row: row-name row-start-number/ row-name row-end-number;
    grid-column: col-name col-start-number / span col-name col-to-span;
}

// 方法七
.grid__item {
    grid-area: header;
}

上面的方法让我们可以通过不同的姿势将网格项目明确的放置在网格系统中的位置。在这个过程中，有些网格项目并没有使用上面提到的方法来明确的放置，那么这些未明确放置的网格项目会根据一种算法来正确的放置。

在接下来的内容中，将会向大家展示这个算法是如何工作的。这样一来，下次再有元素出现在一个意外的位置时，你就不会再感到困惑，也能知道发生了什么。

为了更好的掌握自动放置算法的工作原理，我们有必要来了解一些基本概念：

• 匿名网格项目：如果你把一些文本直接放置在一个网格容器里，而没有使用任何标签包裹它，它将是一个匿名网格项目。在 CSS 网格布局中，你不能为匿名网格项目设置样式，因为你没办法使用 CSS 选择器来选择匿名网格项目，但它仍然从其父容器中继承样式规则。另一方面，网格容器内的空格符，回车符并不会创建自己的匿名网格项目
• 网格跨度（span）的值：网格跨度的值，指的是合并网格单元格数量，它和网格位置不同，该算法没有特别的规则来解决网格跨度的值。如果没有明确指定span的值，它将会是一个默认值，即1。
• 隐式网格：通过前面的学习，我们知道，在CSS网格系统中，使用grid-template-rows、grid-template-columns和grid-template-areas属性显式定义的网格被称为 显式网格。不过，要是你指定一个网格项目的位置，使其位于显式网格的边界之外，浏览器就会产生额外的网格线来放置网格项目。这些网格线和显式网格一起，就构建了 隐式网格。另外，在CSS网格系统中，自动放置网格项目的算法也会导致在隐式网格中创建额外的网格轨道（行或列）

我们在介绍 grid-auto-flow 属性的时候，得知该属性是网格自动放置算法的控制属性，而且其默认值是row。除了 row 值之外，该属性还有 column 和 dense 两个值。换句话说，在CSS网格布局系统中，网格项目自动放置的算法是怎么工作的呢？

换句话说，网格项目自动放置算法是:

将网格项目的自动位置解析为明确的位置，确保每个网格项目都有一个明确的网格区域来放置（一个网格单元格也可以称为是一个网格区域）。

注意，前面也提到过，在网格项目自动放置的算法中，网格跨度是不需要特别解决的。因为未显式指定span的值，即是默认值1。另外，如果在一个显式网格系统中没有空间放置明确指定的网格项目，就有可能根据网格自动放置算法创建隐式的网格轨道（创建隐式的行或列），从而创建一个隐式网格。

另外，网格系统中的每个网格单元格（在显式网格或隐式网格中）都可以被占用或不被占用。如果一个网格单元格被一个有明确网格位置的网格项目覆盖，该网格单元格就被占用；否则，该网格单元格就未被占用。在这个算法中，一个网格单元格的占用或未占用状态是可以被改变的。

为了帮助大家更易于理解，我们将假设grid-auto-flow的值为row。如果它被设置为column，那么在这个算法中要交换所有提到的行和列、内联轴和块轴等。

接下来，我们将通过以下步骤和大家一起来看看该算法在构建布局时遵循的所有步骤的细节（指的是自动放置网格项目算法的步骤和细节）。

步骤1：匿名网格项目的生成

当自动放置网格项目算法试图将所有网格项目放在一个网格系统内时，发生的第一件事就是创建“匿名网格项目”。在网格系统中，网格容器内的文本节点，被称为匿名网格项目。比如：

<div class="grid__container">
    <div class="grid__item"></div>
    <img src="https://picsum.photos/400/300?random=2" alt="" />
    我是一个文本节点 <!-- 该文本节点被称为匿名网格项目 -->
    <div class="grid__item"></div>
    <div class="grid__item" style="float: left"></div>
</div>

假设我们在 .grid__container 上显式定义了一个网格系统：

.grid__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}