我想创建一个包含 2 列的 div，当我在父 div 中添加一个项目时，它应该位于第一列中，当第一列有 3 个元素并且我想添加其他项目时，它应该位于第二栏。 这是我正在寻找的图像：
我在互联网上没有找到回应，我尝试过 css 网格生成器，但没有任何结果..
CSS网格生成器，但我无法得到正确的答案
好的...看来您只是遇到了网格流的问题。要更改它，请使用grid-auto-flow:column; 就是这样，网格的流程将从行更改为列。您可以根据需要更改grid-template-rows。
grid-auto-flow:column;
grid-template-rows
您需要在 html 中做的是：
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> </div>
和CSS：
.parent{ display:grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows:1fr 1fr 1fr; }
演示
好的...看来您只是遇到了网格流的问题。要更改它，请使用
grid-auto-flow:column;就是这样，网格的流程将从行更改为列。您可以根据需要更改grid-template-rows。您需要在 html 中做的是：
和CSS：
.parent{ display:grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows:1fr 1fr 1fr; }演示