Rekomendasi kursus：

Fungsi CSS fit-content()

Definisi dan penggunaan CSS fit-content() Fungsi ini memungkinkan ukuran elemen untuk disesuaikan berdasarkan konten. Cara ini mirip seperti elemen akan menggunakan ruang yang tersedia, tetapi tidak akan melebihi ukuran konten maksimal.

Contoh

Gunakan fit-content() Sesuaikan ukuran kolom di dalam grid：

#container {
  display: grid;
  grid-template-columns: fit-content(250px) fit-content(250px) auto;
  grid-gap: 7px;
  box-sizing: border-box;
  height: 150px;
  width: 100%;
  background-color: green;
  padding: 7px;
}

Coba sendiri

Syarat CSS

fit-content(length|percentage)
Nilai Deskripsi
length Tentukan nilai panjang absolut ukuran.
percentage Tentukan besarnya persentase yang bersangkutan terhadap ruang yang tersedia.

Detil teknis

Versi： CSS4

Dukungan browser

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

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Halaman Terkait

Referensi:Atribut grid-auto-columns CSS

Referensi:Atribut grid-auto-rows CSS

Referensi:Atribut grid-template-columns CSS

Referensi:Atribut grid-template-rows CSS