CSS Grid中的column与row是什么？二者有何区别？

一、基本定义 #

• 列（Column）：CSS Grid里的垂直网格轨道，沿着页面从左到右延伸，是划分网格垂直空间的基本单元，多个列并排构成网格的垂直框架。
• 行（Row）：CSS Grid里的水平网格轨道，沿着页面从上到下延伸，划分网格的水平空间，和列交叉形成一个个独立的网格单元格。

二、核心区别 #

• 排布方向：列是垂直方向（左→右）的空间划分，行是水平方向（上→下）的空间划分，二者交叉构建出二维网格布局。
• 空间控制属性：列的宽度通过grid-template-columns（或grid-auto-columns）定义，负责分配容器的水平空间；行的高度通过grid-template-rows（或grid-auto-rows）定义，负责分配容器的垂直空间。
• 网格项定位方式：定位网格项时，grid-column（或column-start/column-end）控制项在列方向的跨度，grid-row（或row-start/row-end）控制项在行方向的跨度。
• 默认填充顺序：网格项默认按行优先顺序填充（先填满一行的所有列，再换到下一行），可通过grid-auto-flow: column切换为列优先填充。

你提到的行列数量匹配是网格的天然特性——每个行和列的交叉点对应一个单元格，当你定义了n列m行时，就会生成n×m个基础单元格，这也是网格能实现精准二维布局的原因。

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