Bagaimanakah saya boleh membuat baris Grid CSS bersarang menyesuaikan dengan saiz kandungannya dan bukannya mewarisi ketinggian grid induk?

Grid CSS: Melaraskan Baris Grid Bersarang kepada Saiz Kandungan

Dalam HTML dan CSS yang disediakan, anda telah menghadapi isu apabila bersarang grid .grid-3 memaksa barisnya untuk diselaraskan dengan ketinggian grid bersarang .grid-2. Untuk menyelesaikan masalah ini, anda mahu baris .grid-3 melaraskan kepada saiz kandungannya, dengan itu memadankan ketinggian baris .grid-2.

Penyelesaian terletak pada grid-auto-baris harta benda. Secara lalai, sifat ini ditetapkan kepada auto, yang mengagihkan ruang secara sama rata antara baris tanpa mengira saiz kandungannya. Walau bagaimanapun, dalam kes ini, kami memerlukan baris yang melaraskan kepada kandungan.

Untuk mencapai ini, anda perlu menetapkan grid-auto-rows: max-content pada grid .grid-3. Ini memberitahu penyemak imbas untuk membuat baris setinggi yang ditentukan oleh kandungan mereka, memastikan baris tersebut sepadan dengan ketinggian baris .grid-2.

Berikut ialah coretan CSS yang dikemas kini:

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

Dengan perubahan ini, baris dalam .grid-3 kini akan mengubah saiz untuk menampung kandungannya, sepadan dengan ketinggian baris .grid-2 sambil mengekalkan kandungannya kelihatan sepenuhnya.

<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>

Ini menunjukkan cara mengkonfigurasi Grid CSS untuk memastikan baris melaraskan kepada saiz kandungannya, membenarkan grid berbeza sejajar dengan satu sama lain.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat baris Grid CSS bersarang menyesuaikan dengan saiz kandungannya dan bukannya mewarisi ketinggian grid induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!