Mengapakah `minmax()` dalam Grid CSS menjadi Lalai kepada `maks` Daripada `min`?

Mengapa minmax() Menjadi Lalai kepada Maks

Anda mungkin perasan bahawa apabila menggunakan minmax() untuk menetapkan ketinggian atau lebar baris atau lajur grid, tingkah laku lalai adalah untuk trek mengembang ke saiz maksimumnya dan bukannya kekal pada saiz minimumnya. Ini boleh mengelirukan, terutamanya jika anda menjangkakan trek kekal pada saiz terkecilnya mengikut nilai min() dalam minmax().

Memahami Tingkah Laku

Sebab untuk tingkah laku ini terletak pada mod penskalaan lalai trek dalam susun atur grid. Mengikut spesifikasi CSS, trek biasanya akan berkembang untuk mengisi ruang yang tersedia sehingga ia mencapai saiz maksimumnya. Jika ruang yang tersedia lebih besar daripada jumlah saiz minimum semua trek, ruang yang tinggal diagihkan sama rata antara trek tanpa had (yang tanpa saiz maksimum yang ditentukan).

Tingkah laku lalai ini biasanya diingini, kerana ia memastikan trek yang menduduki ruang yang ada dengan cekap.

Mencapai Keutamaan Saiz Minimum

Untuk membuat baris grid atau lajur kekal pada saiz minimumnya, tetapi kembangkan kepada saiz maksimum apabila lebih banyak kandungan ditambahkan, anda boleh menggunakan gabungan minmax() dan sifat CSS lain:

• Gunakan minmax(min -saiz, saiz min) untuk Saiz Baris/Lajur: Ini akan memaksa trek untuk sentiasa berada pada saiz minimumnya, walaupun ada yang tersedia ruang.
• Nyatakan lebar maks/tinggi maks pada Item Grid: Ini akan menghalang item grid daripada melebihi saiz maksimumnya, memastikan baris atau lajur grid tidak mengembang melebihi saiznya. maksimum yang ditentukan saiz.

Contoh:

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
  grid-gap: 20px;
}

.item {
  max-width: 200px;
}

Dalam contoh ini, lajur grid akan sentiasa mempunyai lebar minimum 100px, tetapi tidak akan berkembang melebihi itu saiz. Jika lebih banyak kandungan ditambahkan pada item grid, lajur akan berkembang untuk menampung kandungan baharu, tetapi tidak akan melebihi lebar maksimumnya.

Atas ialah kandungan terperinci Mengapakah `minmax()` dalam Grid CSS menjadi Lalai kepada `maks` Daripada `min`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!