Bagaimana untuk Membuat Baris Grid CSS Melaraskan Ketinggian Kandungan dalam Grid Bersarang?

Grid CSS - Melaraskan Ketinggian Baris kepada Kandungan: Kandungan Maks untuk Ketinggian Auto

Apabila bekerja dengan grid CSS bersarang, anda mungkin menghadapi situasi di mana ketinggian bahagian luar baris grid mempengaruhi baris grid dalam, walaupun apabila ia sepatutnya menyesuaikan dengan saiz kandungannya. Dalam kes sedemikian, kunci untuk mencapai gelagat yang diingini adalah dengan menggunakan grid-auto-rows sifat CSS.

Grid CSS Bersarang dan Penyebaran Ketinggian Baris

Dalam coretan kod yang disediakan, kami mempunyai dua bekas grid (div dan .grid-2) disusun secara mendatar dalam bekas grid induk (grid-1). Lajur dalam setiap grid ditakrifkan menggunakan grid-template-lajur dan auto-peletakan baris dikawal oleh grid-auto-rows.

Secara lalai, bekas .grid-2 menetapkan grid-auto- baris kepada auto, yang bermaksud baris melaraskan agar sesuai dengan kandungannya. Walau bagaimanapun, isu timbul dengan bekas grid dalaman .grid-3. Walaupun grid-auto-rows juga ditetapkan kepada auto, ketinggian baris grid bersarang dipengaruhi oleh baris grid luar. Ini membawa kepada bahagian lebih tinggi bekas .grid-2 yang menyebarkan ketinggiannya ke bekas .grid-3, menghasilkan ketinggian baris yang konsisten di seluruh kedua-dua grid.

Menetapkan Baris Grid kepada 'Kandungan Maks'

Untuk menangani isu ini dan melaraskan baris bekas .grid-3 kepada saiz kandungannya, kita perlu mengubah suai sifat grid-auto-rows. Nilai kandungan maksimum, apabila digunakan dengan grid-auto-rows, memastikan setiap baris dalam grid dalam bersaiz mengikut kandungannya, tanpa mengira ketinggian baris dalam grid luar.

Dengan menetapkan grid -auto-rows: kandungan maksimum dalam bekas .grid-3 dalam, kami mengarahkan penyemak imbas untuk mengira saiz setiap baris hanya berdasarkan kandungan dalam itu barisan. Ini membolehkan grid dalam melaraskan secara bebas daripada grid luar, menghasilkan baris yang membalut kandungannya dengan sempurna, seperti yang dikehendaki.

Coretan Kod Kemas Kini

Dalam coretan kod yang dikemas kini di bawah, anda boleh melihat pengubahsuaian kepada grid-auto-rows dalam .grid-3 dalam bekas:

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
}

Dengan pelarasan ini, baris dalam bekas .grid-3 akan menyesuaikan diri secara dinamik dengan ketinggian kandungannya, mencapai gelagat mengubah saiz yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Baris Grid CSS Melaraskan Ketinggian Kandungan dalam Grid Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!