Bagaimana untuk Membuat Lajur Sama Lebar dengan Grid CSS Tanpa mengira Saiz Kandungan?

Membuat Lajur Sama Lebar dengan Grid CSS

Anda mahu memaparkan kanak-kanak dalam elemen baris dalam bilangan lajur yang sama, tanpa mengira bilangan anak. Walaupun Flexbox boleh melakukannya dengan mudah, CSS Grid memberikan cabaran yang berbeza. Artikel ini menyediakan penyelesaian untuk mencapai perkara ini menggunakan Grid CSS.

Penyelesaian

Percubaan biasa pertama ialah menggunakan repeat(3, 1fr) sebagai nilai untuk grid -template-lajur harta. Walau bagaimanapun, 1fr mengira pengagihan ruang berdasarkan ruang yang ada. Had ini bermasalah apabila kandungan melebihi saiz trek, menghalang lajur daripada melimpah dan melaraskan lebarnya dengan sewajarnya. Lajur separa dengan kandungan terpotong boleh menjadi tidak sama.

Untuk memastikan kesamaan tepat dalam lebar lajur, anda harus menggunakan peraturan berikut:

<code class="css">grid-template-columns: repeat(3, minmax(0, 1fr));</code>

minmax(0, 1fr) menentukan bahawa trek grid boleh mempunyai saiz minimum 0 dan saiz maksimum sewenang-wenangnya 1fr. Ini memastikan bahawa lajur akan sentiasa sama lebar dan menampung kandungan yang melebihi saiz runut.

Perlu diingat bahawa mendayakan limpahan kandungan boleh membawa kepada hasil visual yang berbeza bergantung pada kelakuan lalai penyemak imbas, saiz kandungan atau ruang yang ada. Contoh yang disediakan dalam soalan menggambarkan perbezaan antara kedua-dua pendekatan: ulang(3, 1fr) berbanding ulang(3, minmax(0, 1fr)).

Atas ialah kandungan terperinci Bagaimana untuk Membuat Lajur Sama Lebar dengan Grid CSS Tanpa mengira Saiz Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!