Unit fr dan Repeat
Gunakan unit fr pecahan dan fungsi repeat() untuk membuat jalur grid yang fleksibel.
Unit fr dan Repeat 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.
Apa Itu Satuan fr?
Satuan fr (pecahan) khusus digunakan dalam CSS Grid. Satuan ini menyatakan sebagian dari ruang kosong yang tersisa di wadah grid setelah semua jalur nonfleksibel diberi ukuran.
Contoh fr Sederhana
Dua kolom yang sama besar dan masing-masing mendapatkan setengah ruang yang tersedia:
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Column 1 (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Column 2 (1fr)</div>
</div>Jalur Campuran
Ruang untuk fr dihitung setelah jalur tetap dikurangi:
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px sidebar</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>Pecahan Tidak Sama
Nilai fr yang berbeda menghasilkan kolom yang proporsional:
<div class="thirds" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">25% (1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">50% (2fr)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">25% (1fr)</div>
</div>Fungsi repeat()
repeat() menghindari pengulangan ukuran jalur yang sama. Argumen pertama adalah jumlah pengulangan; argumen kedua adalah ukuran jalur.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
</div>repeat() dengan Jalur Campuran
Anda dapat mengulang pola jalur:
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">2fr</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">1fr</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">2fr</div>
</div>auto-fill
repeat(auto-fill, ...) membuat sebanyak mungkin kolom yang muat di dalam wadah dengan ukuran yang ditentukan. Jalur kosong tetap dipertahankan di bagian akhir.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">200px</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">200px</div>
</div>auto-fit
repeat(auto-fit, ...) bekerja seperti auto-fill, tetapi menciutkan jalur kosong sehingga elemen yang ada dapat merenggang untuk memenuhi wadah.
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">min 200px, grows</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">min 200px, grows</div>
</div>minmax() dalam repeat
minmax(min, max) menentukan rentang ukuran jalur. Jika digabungkan dengan auto-fit, fungsi ini membuat grid responsif tanpa kueri media:
<div class="responsive-grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Card A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Card B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Card C</div>
</div>fr vs Persentase
Tidak seperti persentase, fr secara otomatis mengecualikan ruang jarak. 1fr 1fr dengan jarak 24px menghasilkan dua kolom yang sama besar tanpa perhitungan apa pun. Perhitungan persentase yang setara adalah calc(50% - 12px).
fr dengan min-content dan max-content
Gabungkan fr dengan penentuan ukuran berdasarkan konten untuk membuat tata letak campuran:
<div class="grid" style="display:grid;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Label</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Flexible content area</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Action</div>
</div>Pemeriksaan Cepat
Apa yang dibuat oleh repeat(auto-fit, minmax(200px, 1fr))?
Rangkuman
Satuan fr membagi ruang grid yang tersisa secara proporsional. repeat() menghindari deklarasi jalur yang berulang. Pola repeat(auto-fit, minmax(250px, 1fr)) yang canggih membuat grid kartu yang sepenuhnya responsif tanpa memerlukan kueri media.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Unit fr dan Repeat” gratis?
Ya — teks lengkap “Unit fr dan Repeat” 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 “Unit fr dan Repeat”?
Gunakan unit fr pecahan dan fungsi repeat() untuk membuat jalur grid yang fleksibel. 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 “Unit fr dan Repeat” 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
- Display Grid serta Kolom dan Baris Templat
- Unit fr dan Repeat
- Gap dan Penempatan Grid
- Area Templat Grid