Bagaimanakah saya boleh melaksanakan sistem grid dalam div saya menggunakan Grid CSS?

Question

Saya ingin mencipta div dengan 2 lajur, apabila saya menambah item dalam div induk, ia sepatutnya berada dalam lajur pertama dan apabila lajur pertama mempunyai 3 elemen dan saya mahu menambah item lain, ia sepatutnya berada dalam Lajur dua. Ini adalah imej yang saya cari:

Saya mendapati tiada respons di internet, saya mencuba penjana grid css tetapi tanpa sebarang hasil..

Penjana Grid CSS tetapi saya tidak dapat jawapan yang betul

Answer 1

Baiklah...nampaknya anda cuma ada masalah dengan aliran mesh. Untuk menukarnya, gunakan grid-auto-flow:column; 就是这样，网格的流程将从行更改为列。您可以根据需要更改grid-template-rows.

Answer 2

Apa yang anda perlu lakukan dalam html ialah:

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

dan CSS:

.parent{
     display:grid;
     grid-template-columns: 1fr 1fr;
     grid-auto-flow: column;
     grid-template-rows:1fr 1fr 1fr;
 }

Demo