Bagaimanakah Saya Boleh Membuat Baris Grid CSS Bersarang Auto-Saiz untuk Memadankan Tinggi Kandungan?

Grid CSS: Auto-saiz Baris untuk Menyesuaikan Kandungan

Apabila menggunakan grid CSS bersarang, anda mungkin menghadapi masalah di mana ketinggian baris daripada grid bersarang kanan dipengaruhi oleh grid kiri, mengakibatkan ketinggian tidak sepadan. Untuk menyelesaikan masalah ini dan memastikan baris sebelah kanan melaraskan kepada saiz kandungan, kami boleh menggunakan sifat grid-auto-rows: max-content.

Dalam coretan kod yang disediakan, grid bersarang kanan- auto-rows: auto menetapkan ketinggian baris untuk dikira secara automatik berdasarkan kandungan di dalamnya. Walau bagaimanapun, memandangkan grid kiri mempunyai berbilang baris, ketinggian grid kanan turut dipengaruhi, mengakibatkan ketinggian baris tidak sekata.

Dengan mengubah suai sifat grid-auto-rows grid bersarang kanan kepada grid-auto-rows : max-content, kami menguatkuasakan bahawa ketinggian baris ditetapkan kepada ketinggian elemen terbesar dalam setiap baris. Ini memastikan bahawa baris grid bersarang kanan sepadan dengan ketinggian baris grid kiri, tanpa mengira saiz kandungan.

Di bawah ialah kod yang dikemas kini:

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

Dengan pengubahsuaian ini, grid bersarang kanan baris akan melaraskan secara automatik kepada saiz kandungan, memastikan kedua-dua grid mempunyai baris dengan ketinggian yang sama.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Baris Grid CSS Bersarang Auto-Saiz untuk Memadankan Tinggi Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!