Wie kann ich mithilfe von CSS Grid ein Rastersystem in meinen Divs implementieren?

Question

Ich möchte ein Div mit 2 Spalten erstellen. Wenn ich ein Element im übergeordneten Div hinzufüge, sollte es in der ersten Spalte sein, und wenn die erste Spalte 3 Elemente enthält und ich andere Elemente hinzufügen möchte, sollte es in der zweiten Spalte sein. Dies ist das Bild, das ich suche:

Ich habe im Internet keine Antwort gefunden, ich habe den CSS-Grid-Generator ausprobiert, aber ohne Ergebnisse..

CSS Grid Generator, aber ich kann nicht die richtige Antwort finden

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;
 }

演示