Mengapakah `minmax()` dalam `grid-template-rows` Mengutamakan Saiz Maksimum, dan Bagaimana Saya Boleh Mengekalkan Ketinggian Baris Minimum?

Fungsi minmax() Defaulting to Max Behavior

Apabila menggunakan minmax() pada grid-template-rows, tingkah laku yang terhasil sering menentang jangkaan, mengutamakan nilai max daripada nilai min. Ini membawa kepada regangan baris grid yang tidak dijangka, membuatkan kita tertanya-tanya:

Cara Mengekalkan Baris Grid pada Saiz Minimum

Untuk memastikan baris grid kekal pada saiz minimum yang diisytiharkan, sambil mengembangkan ke maksimum apabila perlu, pertimbangkan penyelesaian berikut:

1. Gunakan minmax(min-content, max-size) untuk grid-template-rows

Pengubahsuaian ini memaksa baris untuk "membungkus rapat" di sekeliling kandungannya, memastikan ia bermula dengan saiz minimum dan mengembang sahaja apabila lebih banyak kandungan ditambah. Saiz maksimum menjamin ia tidak melebihi maksimum yang diingini.

2. Tambahkan ketinggian maksimum pada item grid

Untuk mengelakkan item grid daripada meregang melebihi saiz maksimum yang diingini, tetapkan ketinggian maksimum pada item tersebut.

Contoh:

body {
  grid-template-rows: minmax(50px, min-content);
}

grid-items {
  max-height: 150px;
}

Dengan pendekatan ini, baris grid pada mulanya akan berketinggian 50px, tetapi akan berkembang untuk memuatkan kandungan tambahan. Walau bagaimanapun, mereka tidak akan melebihi ketinggian maksimum 150px.

Atas ialah kandungan terperinci Mengapakah `minmax()` dalam `grid-template-rows` Mengutamakan Saiz Maksimum, dan Bagaimana Saya Boleh Mengekalkan Ketinggian Baris Minimum?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!