Bagaimana untuk Mencapai Lebar Lajur Sama Tepat dalam Grid CSS?

Lebar Lajur Sama Tepat dalam Grid CSS

Membuat lajur bersaiz sama dalam Grid CSS mungkin kelihatan mudah, tetapi ia memerlukan pendekatan khusus. Walaupun Flexbox menawarkan penyelesaian mudah dengan sifat asas-flexnya, Grid CSS memerlukan konfigurasi yang lebih tepat.

Cabaran:

Memandangkan struktur HTML seperti:

<code class="html"><div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div></code>

Matlamatnya ialah untuk memaparkan elemen ini dalam lajur yang sama, tanpa mengira bilangan elemen anak dalam baris.

Penyelesaian:

Yang biasa pendekatan ulangan(3, 1fr) tidak mencukupi, kerana 1fr mengagihkan ruang yang ada dan bukannya menguatkuasakan kesamaan lajur yang ketat. Dalam kes di mana kandungan melebihi saiz runut, ia tidak melaraskan secara automatik, berpotensi mengakibatkan lebar lajur tidak sekata.

Untuk mencapai lebar lajur yang sama tepat, gunakan sifat CSS berikut:

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

Penjelasan:

minmax(0, 1fr) membolehkan trek grid sekecil 0 tetapi sebesar 1fr. Ini memastikan bahawa lajur kekal sama. Walau bagaimanapun, berhati-hati, kerana ia boleh menyebabkan limpahan jika kandungan lebih besar daripada lajur atau jika ia tidak boleh dibalut.

Pertimbangkan contoh berikut untuk menggambarkan perbezaan:

<code class="css">.equalColumns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.minmaxEqualColumns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}</code>

equalColumns dengan ulangan(3, 1fr):

minmaxEqualColumns dengan ulangan(3, minmax(0, 1fr)):

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