Bagaimana untuk Membuat Lajur Isian Bekas Grid CSS Daripada Baris?

Jadikan Lajur Isi Bekas Grid, Bukan Baris

Dalam Reka Letak Grid CSS, sifat aliran automatik grid menentukan sama ada item dibentangkan dalam baris atau lajur. Apabila ditetapkan kepada baris, yang merupakan tetapan lalai, item diletakkan secara mendatar, mencipta baris baharu mengikut keperluan. Tingkah laku ini biasanya tidak sesuai jika reka letak yang diingini adalah menegak.

Apabila grid-auto-flow ditetapkan kepada baris, grid-template-lajur mentakrifkan bilangan lajur dalam grid. Walau bagaimanapun, dalam senario ini, item masih mengalir secara mendatar, mengisi baris dan bukannya lajur.

Untuk grid mengalir menegak yang mencipta lajur baharu mengikut keperluan, tanpa menentukan baris, pertimbangkan untuk menggunakan CSS Multi-Column Reka letak sebaliknya. Ia membolehkan tindanan menegak item, mencipta lajur baharu secara automatik mengikut keperluan.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

Coretan kod ini menggambarkan konsep. Item akan mengalir secara mendatar, mencipta baris baharu seperti yang diperlukan, walaupun definisi tiga lajur dalam sifat grid-template-columns. Ambil perhatian bahawa menggunakan Reka Letak Grid CSS untuk reka letak khusus ini tidak disyorkan.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Lajur Isian Bekas Grid CSS Daripada Baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!