grid-auto-flow 和 子项的grid-row，grid-column同时存在时如何放置

• grid-auto-flow： 可以理解成flew-direction，是用来控制子项排列的
• grid-row或者grid-column： 设置子项开始行或者列开始网格线和结束网格项
• grid-area: grid-row/grid-column 也就是上面的缩写，记成’横竖都是死‘，或者中文的田 ‘十’的写法先横再竖

.container{
	display: grid;
	grid-template: 1fr 1fr 1fr/1fr 2fr 2fr 1fr 2fr;
	grid-auto-flow: column;
}
.item-a { grid-column: 1; grid-row: 2 / 4; }
.item-b { grid-row: 1 / 3; }
.item-c {}
.item-d {}
.item-e {}

<div class="container">
	<div class="item-a">A</div>
	<div class="item-b">B</div>
	<div class="item-c">C</div>
	<div class="item-d">D</div>
	<div class="item-e">E</div>
</div>

参考：写给自己看的display: grid布局教程

好了问题来了，为什么grid-auto-flow选择row的时候C在第一行第一列（1，1），选择column时为什么C在第三行第二列（3，2）？

自动布局算法

• 先放置子项设定了定位项
• 按文档顺序放置，自动放置指针移动从第一行第一列（1，1）开始填充
• 默认行优，先填充满行，不会回溯填充空白项可通过grid-auto-flow: dense改变
• 跳过占用网格

grid-auto-flow为row

按照上方步骤如下： 从左到右，从上到下 第一步： 放置定位A；放置定位B从第一行到第三行，列数自动。这个时候第一列已经放不下B，切换到第二列，有空位填充; 第二步： 放置C，从（1，1）开始放置元素，有空位放在第一位； 放置D，E，第一行还有剩余跳过占用网格，按照顺序依次排列； 结果时

C	B	D	E
A	B
A

grid-auto-flow为column

从上到下，从左到右 第一步： 放置定位A； 第二步： 放置B，从（1，1）开始放置，发现放不下，移动第二列，用空位填充； 从B后面档位置放置C，D，E

	B	D
A	B	E
A	C

为什么row和columnB的计算方式不同，猜测是因为没有定位grid-column的原因。为了验证这个猜测，给B添加grid-column: 2;

grid-auto-flow: row时

C	B	D	E
A	B
A

grid-auto-flow: column时

C	B	E
A	B
A	D

完美符合正常的填充方式，先定位，在放置，C没有跑到B后面去了。

总结

1. 子项同时加列grid-row和grid-column时，填充同时加了这个两属性的项，在填充其他项；
2. 子项只有其中一个属性时，根据grid-auto-flow的方向决定是不是先放置，还是等前面的子项放完再放置
   • 只加grid-row：grid-auto-flow为row时，该子项是定位项，先放置；column时，该子项非定位项，会影响自动放置指针，列数位置取决于文档前div的子项放置后的位置，行固定在指定位置。
   • 只加grid-column：grid-auto-flow为row时，该子项非定位项，行数取决于文档前div子项放置后位置，列固定，column时，该子项是定位项，先放置。