CSS Grid布局中网格项默认按行排列的原因是什么？

这个表现完全是CSS Grid规范定义的属性初始值、配套自动布局算法共同作用的结果，不存在额外的特殊规则。

决定默认表现的初始属性值 #

所有和布局流向、轨道生成、项位置相关的属性，默认值如下：

• grid-auto-flow：初始值为row，这是控制自动放置流向的核心属性，直接决定网格项优先填充的方向。
• grid-template-rows、grid-template-columns：初始值均为none，代表容器没有预先定义显式的行、列轨道。
• grid-auto-rows、grid-auto-columns：初始值均为auto，代表自动生成的隐式行、列轨道尺寸由轨道内的内容尺寸、容器剩余空间共同决定。
• 所有网格项的定位属性grid-column-start/grid-column-end、grid-row-start/grid-row-end初始值都是auto，代表项没有手动指定固定位置，全部走自动放置流程。

背后的布局运行逻辑 #

Grid自动布局的执行逻辑按以下顺序走：

1. 首先遍历所有网格项，先把手动指定了固定行/列位置的项放到对应单元格，标记这些单元格为已占用。
2. 剩余未指定位置的项，按照grid-auto-flow设定的流向填充：默认值为row时，算法优先按行填充，从网格左上角的第一个单元格开始，逐行从左到右寻找空余单元格放置当前项。
3. 当当前行没有空余单元格、或者没有显式定义列轨道时，算法会自动生成对应隐式轨道容纳内容：在给出的示例场景下，因为没有显式定义任何列轨道，算法默认每一行只生成1个宽度撑满容器的隐式列，每个网格项放完就自动生成下一个隐式行，最终呈现出5个项从上到下逐行排列、每个占满容器全宽的效果。

对应示例代码 #

.wrapper {
  width: 300px;
  background-color: rgb(32, 156, 88);
  display: grid;
}

.wrapper div {
  background-color: rgb(226, 228, 131);
  border: 1px solid rgb(41, 135, 151);
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

如果手动将容器的grid-auto-flow修改为column，且不设置固定容器高度，网格项就会变成从左到右按列排列，项宽度由内容撑开，就是流向属性变更后的直接表现。

内容的提问来源于stack exchange，提问作者flasher1101