Auto-fit dan Auto-fill dengan minmax
Buat jumlah kolom responsif secara otomatis menggunakan auto-fit dan auto-fill dengan minmax().
Auto-fit dan Auto-fill dengan minmax adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Grid Responsif Otomatis
Pola CSS Grid yang paling kuat: grid yang sepenuhnya responsif dan menyesuaikan jumlah kolom secara otomatis tanpa kueri media apa pun, menggunakan auto-fit atau auto-fill yang digabungkan dengan minmax().
auto-fill
auto-fill memenuhi baris dengan kolom sebanyak mungkin yang dapat dimuat pada ukuran minimum yang ditentukan. Kolom kosong tetap dipertahankan sebagai jalur kosong di bagian akhir.
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit bekerja seperti auto-fill, tetapi menyusutkan jalur kosong hingga lebarnya menjadi nol. Item yang ada melebar untuk mengisi ruang yang tersisa.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Perbedaan auto-fill vs auto-fit
Perbedaannya hanya penting ketika jumlah item lebih sedikit daripada jumlah yang dapat memenuhi baris:
auto-fill: jalur kolom kosong tetap ada, item tidak melebar untuk mengisi ruangauto-fit: jalur kosong menyusut, item melebar untuk mengisi seluruh lebar yang tersedia
auto-fit dengan minmax()
Pola grid responsif yang terkenal—item memiliki lebar minimal 250px, membesar untuk mengisi ruang, dan otomatis membungkus ke baris baru:
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>Penjelasan minmax()
minmax(min, max) menentukan rentang ukuran jalur. Jalur tidak akan lebih kecil daripada min atau lebih besar daripada max. Jika digabungkan dengan fr, pola ini menghasilkan jalur fleksibel yang dibatasi oleh ukuran minimum.
<div class="track"><div>Flexible track</div></div>auto-fill dengan minmax untuk Item Tetap
Saat Anda menginginkan item berukuran tetap dan membiarkan ruang kosong di bagian akhir:
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>Responsif Tanpa Kueri Media
Inilah manfaat utamanya: repeat(auto-fit, minmax(280px, 1fr)) secara otomatis beradaptasi dari 1 kolom pada perangkat seluler menjadi sebanyak mungkin kolom yang muat pada layar yang lebih besar:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>min() untuk minmax yang Lebih Aman
Hindari masalah tata letak pada wadah yang sangat kecil dengan menggunakan min(100%, 280px) sebagai ukuran minimum, bukan nilai piksel mentah:
<div class="grid"><div>Item</div></div>auto-fill untuk Perataan Mirip Masonry
Dengan auto-fill, jalur kosong di bagian akhir mempertahankan perataan ketika jumlah item bukan kelipatan jumlah kolom—berguna untuk grid yang konsisten.
Ukuran Intrinsik Grid vs Flexbox
flex-wrap + flex: 1 1 250px pada Flexbox serupa, tetapi tidak menjamin lebar kolom yang sama—item dapat melebar secara tidak merata. Grid dengan minmax memastikan jalur yang benar-benar seragam.
Pemeriksaan Singkat
Nilai grid mana yang membuat kolom responsif tanpa kueri media dengan menyusutkan jalur kosong agar item mengisi ruang yang tersedia?
Ringkasan
repeat(auto-fit, minmax(250px, 1fr)) adalah satu pola grid responsif paling kuat—tidak diperlukan kueri media sama sekali. auto-fit menyusutkan jalur kosong agar item mengisi baris. auto-fill mempertahankan jalur kosong untuk perataan yang konsisten. Selalu pasangkan dengan gap untuk membuat celah.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Auto-fit dan Auto-fill dengan minmax” gratis?
Ya — teks lengkap “Auto-fit dan Auto-fill dengan minmax” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Auto-fit dan Auto-fill dengan minmax”?
Buat jumlah kolom responsif secara otomatis menggunakan auto-fit dan auto-fill dengan minmax(). Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai CSS Academy?
Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Auto-fit dan Auto-fill dengan minmax” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Line Bernama dan Area Grid Bernama
- Auto-fit dan Auto-fill dengan minmax
- Grid Implisit dan Grid-Auto-Flow
- Subgrid untuk Konten Bertingkat yang Sejajar