Bagaimana untuk Mencipta Lajur Grid CSS Bersaiz Sama Tanpa Kira Kandungan?

Lajur Grid CSS Bersaiz Sama

Ramai pengaturcara menghadapi cabaran dalam mencapai lajur yang sama lebar dalam reka letak Grid CSS. Walaupun Flexbox memudahkan tugas ini, ini boleh dicapai menggunakan Grid CSS juga.

Pendekatan yang paling biasa ialah menggunakan fungsi repeat(), seperti dalam grid-template-columns: repeat(3, 1fr); . Walau bagaimanapun, trengkas ini boleh menjadi masalah jika kandungan melebihi saiz trek, kerana ia hanya mengagihkan ruang yang tersedia. Untuk memastikan lebar yang sama tanpa mengira saiz kandungan, gunakan sintaks berikut:

grid-template-columns: repeat(3, minmax(0, 1fr));

Harta minmax() membenarkan runut sekecil 0 dan sebesar 1fr, memastikan lajur bersaiz sama. Walau bagaimanapun, ambil perhatian bahawa ini boleh menyebabkan limpahan jika kandungan terlalu besar atau tidak boleh dibalut.

Berikut ialah contoh yang menggambarkan perbezaan:

• ulang(3, 1fr): Jika kandungan melebihi saiz runut, lajur mungkin mempunyai lebar yang tidak sekata.
• ulang(3, minmax(0, 1fr)): Lajur sentiasa kekal sama lebar, tetapi limpahan mungkin berlaku.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Lajur Grid CSS Bersaiz Sama Tanpa Kira Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!