如何使用 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;
 }

示範