Auto-fit dan Auto-fill dengan minmax
Cipta bilangan lajur responsif secara automatik menggunakan auto-fit dan auto-fill bersama minmax().
Auto-fit dan Auto-fill dengan minmax ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Grid Responsif Automatik
Pola CSS Grid yang paling berkuasa: grid yang responsif sepenuhnya dan melaraskan bilangan lajur secara automatik tanpa sebarang pertanyaan media, menggunakan auto-fit atau auto-fill yang digabungkan dengan minmax().
auto-fill
auto-fill memenuhi baris dengan sebanyak mungkin lajur yang boleh dimuatkan pada saiz minimum yang diberikan. Lajur kosong dikekalkan sebagai trek kosong di hujung.
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit berfungsi seperti auto-fill tetapi mengecilkan trek kosong kepada lebar sifar. Item sedia ada diregangkan untuk memenuhi ruang yang tinggal.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Perbezaan auto-fill berbanding auto-fit
Perbezaannya hanya penting apabila bilangan item lebih sedikit daripada jumlah yang boleh memenuhi baris:
auto-fill: trek lajur kosong kekal dan item tidak diregangkan untuk memenuhi ruangauto-fit: trek kosong mengecil dan item mengembang untuk memenuhi semua lebar yang tersedia
auto-fit dengan minmax()
Pola grid responsif yang terkenal — item sekurang-kurangnya selebar 250px, membesar untuk memenuhi ruang dan membalut ke baris baharu secara automatik:
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>Penjelasan minmax()
minmax(min, max) mentakrifkan julat saiz trek. Trek tidak akan lebih kecil daripada min atau lebih besar daripada max. Apabila digabungkan dengan fr, ia menghasilkan trek fleksibel yang mempunyai had minimum.
<div class="track"><div>Flexible track</div></div>auto-fill dengan minmax untuk Item Tetap
Apabila Anda mahu item pada saiz tetap dan membenarkan ruang kosong di hujung:
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>Responsif Tanpa Pertanyaan Media
Inilah manfaat utamanya: repeat(auto-fit, minmax(280px, 1fr)) menyesuaikan diri secara automatik daripada satu lajur pada peranti mudah alih kepada sebanyak mungkin lajur yang muat pada skrin lebih besar:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>min() untuk minmax yang Lebih Selamat
Elakkan masalah susun atur dalam bekas kecil dengan menggunakan min(100%, 280px) sebagai minimum dan bukannya nilai piksel mentah:
<div class="grid"><div>Item</div></div>auto-fill untuk Penjajaran Seperti Susunan Batu Bata
Dengan auto-fill, trek kosong di hujung mengekalkan penjajaran apabila bilangan item bukan gandaan bilangan lajur — berguna untuk grid yang konsisten.
Pensampelan Intrinsik Grid berbanding Flexbox
Flexbox flex-wrap + flex: 1 1 250px adalah serupa tetapi tidak menjamin lebar lajur yang sama — item mungkin meregang secara tidak sekata. Grid dengan minmax memastikan trek yang seragam sepenuhnya.
Semakan Pantas
Nilai grid manakah yang menghasilkan lajur responsif tanpa pertanyaan media dengan mengecilkan trek kosong supaya item memenuhi ruang yang tersedia?
Ulang Kaji
repeat(auto-fit, minmax(250px, 1fr)) ialah satu-satunya pola grid responsif yang paling berkuasa — tiada pertanyaan media diperlukan. auto-fit mengecilkan trek kosong supaya item memenuhi baris. auto-fill mengekalkan trek kosong untuk penjajaran yang konsisten. Sentiasa pasangkannya dengan gap untuk ruang antara item.
Pelajari CSS dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Auto-fit dan Auto-fill dengan minmax” percuma?
Ya — teks penuh “Auto-fit dan Auto-fill dengan minmax” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Auto-fit dan Auto-fill dengan minmax”?
Cipta bilangan lajur responsif secara automatik menggunakan auto-fit dan auto-fill bersama minmax(). Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “Auto-fit dan Auto-fill dengan minmax” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?
Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Garis Bernama dan Kawasan Grid Bernama
- Auto-fit dan Auto-fill dengan minmax
- Grid Tersirat dan Grid-Auto-Flow
- Subgrid untuk Kandungan Bersarang yang Selaras