Bagaimanakah saya boleh membuat baris Grid CSS bersarang melaraskan ketinggiannya secara automatik agar sepadan dengan kandungan?

Grid CSS: Baris Ketinggian Auto, Saiz kepada Kandungan

Apabila bekerja dengan grid CSS bersarang, mencapai ketinggian baris yang konsisten merentas kedua-dua grid boleh satu cabaran. Dalam senario ini, baris dalam grid bersarang kanan terpaksa memadankan ketinggian baris dalam grid bersarang kiri, menyebabkan jarak tidak sekata.

Untuk membetulkan isu ini, anda boleh menggunakan grid-auto- baris: sifat kandungan maksimum untuk grid bersarang yang betul. Sifat ini menetapkan ketinggian setiap baris kepada ketinggian elemen anak tertingginya. Akibatnya, baris akan dilaraskan secara dinamik untuk menampung kandungan, menjajarkan ketinggian dengan yang berada di grid bersarang kiri.

Contoh:

.grid-3 {
  grid-auto-rows: max-content;
}

Pengubahsuaian ini memastikan bahawa setiap baris dalam grid bersarang kanan bersaiz sesuai dengan kandungannya, mewujudkan ketinggian yang konsisten antara kedua-dua grid. Berikut ialah coretan yang dikemas kini:

.grid-2 {
  grid-auto-rows: max-content;
}

.grid-3 {
  grid-auto-rows: max-content;
}

<div class="grid-2">
  <div class="grid-2">
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
  </div>
  <div class="grid-3">
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
  </div>
</div>

Kini, baris dalam kedua-dua grid bersarang kiri dan kanan akan melaraskan ketinggiannya secara automatik, menghasilkan hasil visual yang konsisten.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat baris Grid CSS bersarang melaraskan ketinggiannya secara automatik agar sepadan dengan kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!