Bagaimana untuk Mencapai Lajur Lebar Sama dalam Grid CSS Tanpa mengira Saiz Kandungan?

Mencapai Lajur Lebar Sama dalam Grid CSS

Apabila bekerja dengan Grid CSS, mengagihkan elemen secara sama rata merentas lajur boleh menjadi mencabar. Walaupun Flexbox menawarkan pendekatan yang mudah, untuk mencapai hasil yang sama dengan CSS Grid memerlukan sedikit pertimbangan.

Soalan Asal:

"Saya ingin memaparkan elemen dalam baris dalam lajur yang sama lebar, tanpa mengira bilangan kanak-kanak dalam baris saya telah cuba menggunakan Grid CSS, tetapi saya menghadapi masalah untuk membuatnya kerja."

Jawapan:

Penyelesaian ulang(3, 1fr) yang biasa dicadangkan tidak tepat sepenuhnya. Seperti yang dinyatakan dalam jawapan:

"1fr ialah mengenai pengagihan ruang yang tersedia(!). Ini terputus sebaik sahaja kandungan menjadi lebih besar daripada saiz trek."

Untuk memastikan lajur mengekalkan lebarnya yang sama, adalah disyorkan untuk menggunakan minmax(0, 1fr) sebaliknya:

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

minmax(0, 1fr) membenarkan trek grid sekecil 0 dan sebesar 1fr. Ini memastikan bahawa lajur mengekalkan lebar yang sama. Walau bagaimanapun, pendekatan ini boleh menyebabkan limpahan kandungan jika ia melebihi lebar lajur.

Untuk demonstrasi visual perbezaan antara pendekatan ini, pertimbangkan contoh berikut:

<code class="html"><div class="row">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div></code>

Dengan ulang(3 , 1fr), lajur akan melaraskan lebarnya berdasarkan ruang yang tersedia, yang berpotensi menghasilkan lebar yang berbeza. Walau bagaimanapun, menggunakan repeat(3, minmax(0, 1fr)) akan memastikan bahawa ketiga-tiga lajur mempunyai lebar yang sama, tanpa mengira saiz kandungan.

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