Bagaimanakah Saya Boleh Mencipta Susun Atur Grid Mengalir Menegak dalam CSS?

Bekas Grid Mengalir Menegak

Dalam Reka Letak Grid CSS, mentakrifkan bekas grid untuk mengalir secara menegak dan bukannya mendatar tidak boleh dilakukan secara langsung. Timbul persoalan sama ada bilangan lajur atau baris harus ditentukan, kerana CSS Flexbox menawarkan atribut arah-flex.

Had Susun Letak Grid CSS

Masalah dengan CSS Susun Atur Grid ialah hubungan songsang antara sifat grid-auto-flow dan grid-template-rows/lajur. Apabila grid-auto-flow: baris ditetapkan bersama-sama dengan grid-template-lajur, item grid secara automatik mencipta baris, mengalir dalam arah mendatar.

Alternatif Reka Letak Berbilang Lajur

Untuk grid yang benar-benar mengalir menegak, Reka Letak Berbilang Lajur CSS harus dipertimbangkan. Modul ini membenarkan penciptaan lajur baharu mengikut keperluan, tanpa menentukan baris:

#container {
  column-count: 3;
}

Contoh:

<div>

Kod ini akan mencipta grid yang mengalir menegak dengan tiga lajur.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Susun Atur Grid Mengalir Menegak dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!