Rekomendasi kuliah:

Fungsi minmax() CSS

Definisi dan penggunaan CSS minmax() Fungsi untuk layout grid CSS dan tentukan sebuah rentang ukuran yang lebih besar atau sama dengan nilai minimum dan lebih kecil atau sama dengan nilai maksimal.

Contoh

Gunakan minmax() Tentukan ukuran rentang untuk kolom grid：

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px;
  grid-gap: 5px;
  height: 150px;
  background-color: green;
  padding: 10px;
}

Coba sendiri

Syntaks CSS

minmax(min, max)
Nilai Deskripsi
min

Diperlukan. Nilai minimal.

Dapat berupa panjang, persen, nilai fleksibel (fr) atau salah satu kata kunci berikut:

  • auto
  • max-content
  • min-content
max

Diperlukan. Nilai maksimal.

Dapat berupa panjang, persen, nilai fleksibel (fr) atau salah satu kata kunci berikut:

  • auto
  • max-content
  • min-content

Detil teknis

Versi： Modul Layout Grid CSS Level 2

Dukungan browser

Angka di tabel menunjukkan versi browser yang pertama yang sepenuhnya mendukung fungsi ini.

Chrome Edge Firefox Safari Opera
59 16 52 10.1 44

Halaman yang berhubungan

Referensi：Fungsi min() CSS

Referensi：Fungsi max() CSS

Referensi：Properti grid-template-columns CSS

Referensi：Properti grid-template-rows CSS

Referensi：Atribut grid-auto-columns CSS

Referensi：Atribut grid-auto-rows CSS