Bagaimanakah Saya Boleh Membuat Grid Jajaran Menegak dalam CSS?

Menggunakan Reka Letak Grid CSS untuk Mencipta Grid Jajaran Menegak

Apabila bekerja dengan Reka Letak Grid CSS, anda mungkin menghadapi situasi di mana anda keinginan untuk mencipta grid yang mengalir secara menegak dan bukannya aliran mendatar lalai. Walaupun CSS Flexbox menyediakan sifat flex-direction untuk mengatasi arah aliran, CSS Grid Layout pada masa ini tidak mempunyai atribut serupa yang secara eksplisit menentukan aliran yang dikehendaki.

Dalam CSS Grid Layout, sifat grid-auto-flow bertanggungjawab. untuk menentukan arah penempatan item grid. Apabila ditetapkan kepada baris (nilai lalai), item mengalir secara mendatar, mencipta baris baharu mengikut keperluan. Sebaliknya, menetapkan grid-auto-aliran kepada lajur akan menyebabkan item mengalir secara menegak, mencipta lajur baharu mengikut keperluan.

Walau bagaimanapun, gelagat yang diingini ini tidak boleh dicapai semata-mata dengan Reka Letak Grid CSS. Untuk mencipta grid yang mengisi secara menegak dalam bilangan lajur yang ditentukan tanpa menentukan baris, Reka Letak Berbilang Lajur CSS ialah alternatif yang sesuai untuk dipertimbangkan. Tidak seperti Reka Letak Grid CSS, Reka Letak Berbilang Lajur CSS membenarkan untuk mencipta reka letak berbilang lajur dengan aliran lajur automatik, memastikan item grid diisi secara menegak sehingga lajur baharu diperlukan.

Berbilang Lajur CSS Contoh Reka Letak:

#container {
  columns: 3;  /* Specify the number of columns */
}

#container div {
  margin-left: 5px;  /* Add some margin for clarity */
}

<div>

Dengan menggunakan CSS Multi-Column Susun atur, anda boleh mencapai susun atur grid sejajar menegak yang dikehendaki dengan bilangan lajur yang ditentukan tanpa menentukan baris, mengatasi had Susun atur Grid CSS dalam senario tertentu ini.

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