如何使用display:grid实现3列纵向网格按列优先排布效果

要实现元素先沿纵向填满当前列、再排布到下一列的3列网格效果，不需要给单个子元素设置位置，仅通过容器属性即可完成，核心是修改网格的自动流方向。

核心属性说明 #

• display: grid：将容器声明为网格布局容器
• grid-template-columns: repeat(3, 1fr)：固定生成3个等宽列
• grid-template-rows: repeat(8, auto)：提前定义8行（匹配示例中每列8个元素的需求，可根据实际每列承载的元素数调整数值），行高自适应内容
• grid-auto-flow: column：核心配置，将网格默认的「行优先排布」规则改为「列优先排布」，元素会优先填充当前列的所有行，填满后再自动流入下一列。

完整实现代码 #

.grid-container {
  display: grid;
  /* 3列等宽 */
  grid-template-columns: repeat(3, 1fr);
  /* 每列8行，按需调整数值即可 */
  grid-template-rows: repeat(8, auto);
  /* 列优先填充 */
  grid-auto-flow: column;
  /* 可选：设置单元格间距 */
  gap: 0.5rem 1rem;
}

HTML结构只需要按数字顺序排列子元素即可，无需额外配置：

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
</div>

上述代码渲染后排布效果和需求完全一致：

1  9   17
2  10  18
3  11  19
4  12  20
5  13  21
6  14  22
7  15  23
8  16  24

注意事项 #

如果后续元素数量变化，只需要调整grid-template-rows的重复次数即可。比如需要每列放6个元素，就将属性值改为repeat(6, auto)，超出预设数量的元素会自动生成新列，继续遵循纵向填充规则。

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