Bagaimanakah Saya Boleh Membuat Pengisian Grid CSS Secara Menegak dengan Bilangan Lajur Tetap?

Buat Lajur Isi Bekas Grid, Bukan Baris

Soalan:

Bagaimana saya boleh membuat grid CSS yang mengisi menegak dan bukannya mendatar, membenarkan bilangan baris sewenang-wenangnya sambil mengekalkan bilangan tetap lajur?

Jawapan:

Walaupun Reka Letak Grid CSS tidak dapat mengendalikan reka letak khusus ini secara asli, Reka Letak Berbilang Lajur CSS menawarkan penyelesaian.

Susun Letak Berbilang Lajur CSS:

#container {
  column-count: 3;
}

Ini kod mentakrifkan bekas dengan tiga lajur yang akan membuat lajur baharu secara automatik seperti yang diperlukan, memenuhi keperluan aliran menegak.

Had Reka Letak Grid CSS:

Dalam Reka Letak Grid CSS , grid-auto-flow dan grid-template-columns mempunyai hubungan songsang:

• Dengan grid-auto-flow: baris (lalai) dan grid-template-lajur ditakrifkan, item mengalir secara mendatar, mencipta baris baharu secara automatik.
• Walau bagaimanapun, membalikkan sifat ini (grid-auto-flow: lajur dan grid- baris templat ditakrifkan) mengakibatkan pengisytiharan tidak sah.

Oleh itu, mencapai grid pengisian menegak dengan bilangan lajur tetap tidak boleh dilakukan menggunakan Reka Letak Grid CSS sahaja.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Pengisian Grid CSS Secara Menegak dengan Bilangan Lajur Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!