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

Barbara Streisand
Lepaskan: 2024-11-05 10:01:02
asal
489 orang telah melayarinya

How to Create Equal-Width Columns with CSS Grid Regardless of Content Size?

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan