如何使用 CSS 网格在我的 div 中实现网格系统？

Question

我想创建一个包含 2 列的 div，当我在父 div 中添加一个项目时，它应该位于第一列中，当第一列有 3 个元素并且我想添加其他项目时，它应该位于第二栏。 这是我正在寻找的图像：

我在互联网上没有找到回应，我尝试过 css 网格生成器，但没有任何结果..

CSS网格生成器，但我无法得到正确的答案

Answer 1

好的...看来您只是遇到了网格流的问题。要更改它，请使用grid-auto-flow:column; 就是这样，网格的流程将从行更改为列。您可以根据需要更改grid-template-rows。

Answer 2

您需要在 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;
 }

演示