如何调整Tailwind CSS Grid父容器实现纵向优先排列？

DevOps 小满

2026-7-12

Grid布局纵向填充调整方案

要将原横向排列的Grid改为纵向列填充的效果，只需修改父容器的Tailwind类：

替换原有的 grid-cols-3 为 grid-rows-3，明确网格为3行结构
添加 grid-flow-col 类，将网格元素的填充规则从默认的按行填充改为按列填充

修改后的完整代码：

<div className="grid h-full grid-rows-3 gap-2 grid-flow-col">
            <button className="px-1 py-1 text-white bg-pink-400 rounded h-[50px] min-h-[50px]">
              1
            </button>
            <button className="px-1 py-1 text-white bg-pink-400 rounded h-[50px] min-h-[50px]">
              2
            </button>
            <button className="px-1 py-1 text-white bg-pink-400 rounded h-[50px] min-h-[50px]">
              3
            </button>
            <button className="px-1 py-1 text-white bg-pink-400 rounded h-[50px] min-h-[50px]">
              4
            </button>
            <button className="px-1 py-1 text-white bg-pink-400 rounded h-[50px] min-h-[50px]">
              5
            </button>
            <button className="px-1 py-1 text-white bg-pink-400 rounded h-[50px] min-h-[50px]">
              6
            </button>
            <button className="px-1 py-1 text-white bg-pink-400 rounded h-[50px] min-h-[50px]">
              7
            </button>
            <button className="px-1 py-1 text-white bg-pink-400 rounded h-[50px] min-h-[50px]">
              8
            </button>
            <button className="px-1 py-1 text-white bg-pink-400 rounded h-[50px] min-h-[50px]">
              9
            </button>
          </div>

调整后，无论元素数量多少，都会自动按列顺序填充：