Bagaimana untuk Mencapai Lajur Sama Lebar dalam Grid CSS?

Lajur Sama Lebar dalam Grid CSS

Flexbox telah mendapat pengiktirafan kerana keupayaannya untuk memaparkan item dalam lajur yang sama lebar. Walau bagaimanapun, CSS Grid juga menawarkan pilihan susun atur yang fleksibel, menimbulkan persoalan tentang cara mencapai kesan yang sama.

Struktur HTML yang disediakan termasuk elemen baris dengan berbilang elemen item anak. Matlamatnya adalah untuk mengagihkan item ini secara sama rata merentas baris, tanpa mengira bilangan item yang hadir.

Penyelesaian biasa yang dicadangkan untuk Grid CSS ialah menggunakan repeat(3, 1fr). Walaupun ini mencapai sebahagian kesan yang diingini, ia mungkin gagal apabila kandungan melebihi saiz trek. Ini kerana 1fr menandakan pengagihan ruang yang tersedia, yang tidak menjamin lebar lajur yang sama dalam semua kes.

Untuk memastikan kesaksamaan yang tepat, kod CSS berikut hendaklah digunakan sebaliknya:

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

minmax(0, 1fr) mengehadkan trek grid kepada saiz minimum 0 dan saiz maksimum 1fr. Ini memastikan bahawa semua lajur akan kekal lebar yang sama, walaupun kandungan melimpah.

Berikut ialah contoh untuk menggambarkan perbezaan antara repeat(3, 1fr) dan repeat(3, minmax(0, 1fr)):

<code class="html"><div class="container">
  <div class="row" style="grid-template-columns: repeat(3, 1fr)">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>

  <div class="row" style="grid-template-columns: repeat(3, minmax(0, 1fr))">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item overflow">Very long text that overflows the column</div>
  </div>
</div></code>

Dengan ulang(3, 1fr), item limpahan akan keluar dari lajurnya. Sebaliknya, repeat(3, minmax(0, 1fr)) memastikan semua lajur kekal sama, dengan kandungan limpahan boleh dilihat di bawah.

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