CSS Grid: template-areas, auto-fit, minmax
Beri nama pada area grid agar tata letak mudah dibaca, gunakan auto-fit dengan minmax() untuk kolom responsif, dan kendalikan track implisit.
CSS Grid: template-areas, auto-fit, minmax adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Area Templat Bernama — Tata Letak Visual
grid-template-areas memungkinkan Anda menamai wilayah dalam format ASCII visual. Setiap string adalah satu baris; setiap kata adalah satu sel. Titik (.) menunjukkan sel kosong. Tetapkan elemen dengan grid-area: name.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Area Templat Responsif dengan Kueri Media
Ubah tata letak template-areas pada titik henti untuk memindahkan bilah sisi dari kolom ke bawah konten utama pada perangkat seluler.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit dibandingkan dengan auto-fill
auto-fit: menciutkan track kosong agar item merenggang memenuhi baris. auto-fill: mempertahankan struktur kisi meskipun track kosong. Untuk kisi kartu responsif, auto-fit hampir selalu menjadi pilihan yang Anda inginkan.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}minmax() secara Mendalam
minmax(min, max) menentukan track yang ukurannya setidaknya min dan paling besar max. Kombinasi umum: minmax(0, 1fr) (sepenuhnya fleksibel), minmax(200px, 1fr) (responsif dengan ukuran minimum), minmax(auto, auto) (disesuaikan dengan konten).
Membentangkan Kolom dan Baris
Gunakan grid-column: span 2 agar item membentang sepanjang dua kolom. Gabungkan dengan grid-row: span 2 untuk item unggulan yang menempati blok 2×2 dalam kisi.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}Penempatan Otomatis Padat
grid-auto-flow: dense mengisi kembali celah kosong dengan item yang lebih kecil. Ini berguna untuk tata letak yang menyerupai masonry ketika item memiliki ukuran yang beragam.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}Unit Pecahan dan Persentase
Unit fr selalu merujuk pada ruang yang tersedia setelah track berukuran tetap dan jarak dikurangkan. Mencampur fr dengan ukuran tetap memberikan fleksibilitas maksimal: bilah sisi tetap, konten utama fleksibel.
grid-auto-columns dan grid-auto-rows
Keduanya mengatur ukuran track yang dibuat secara implisit (ketika item ditempatkan di luar kisi eksplisit). grid-auto-rows: minmax(100px, auto) memberikan tinggi minimum pada baris implisit.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}Memeriksa Grid di DevTools
Chrome DevTools menampilkan garis kisi dan nama area di atas halaman saat Anda mengeklik lencana 'grid' di sebelah kontainer grid pada panel Elements. Gunakan fitur ini untuk menelusuri ukuran track dan penempatan item yang tidak terduga.
CSS Subgrid
grid-template-columns: subgrid memungkinkan kisi bertingkat diselaraskan dengan track kisi induknya. Fitur ini didukung di semua peramban modern sejak 2023 — penting untuk menyelaraskan bagian dalam kartu di seluruh kisi kartu.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}Saat Grid Lebih Unggul daripada Flexbox
Grid menjadi pilihan terbaik ketika Anda memerlukan kontrol dua dimensi yang eksplisit — saat baris dan kolom sama-sama penting. Jika Anda hanya ingin menata item dalam satu baris atau tumpukan, Flexbox lebih sederhana.
Pemeriksaan Cepat
Nilai CSS Grid mana yang membuat kolom sebanyak mungkin dengan lebar minimum 200px, dengan setiap kolom berbagi sisa ruang secara merata?
Rangkuman: CSS Grid Tingkat Lanjut
grid-template-areas membuat tata letak bernama yang mudah dibaca. auto-fit + minmax membuat kisi responsif tanpa kueri media. Bentangkan item melintasi kolom dan baris. Alur otomatis padat mengisi celah. Gunakan hamparan kisi DevTools untuk menelusuri masalah. Subgrid menyelaraskan item bertingkat dengan track induk.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “CSS Grid: template-areas, auto-fit, minmax” gratis?
Ya — teks lengkap “CSS Grid: template-areas, auto-fit, minmax” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “CSS Grid: template-areas, auto-fit, minmax”?
Beri nama pada area grid agar tata letak mudah dibaca, gunakan auto-fit dengan minmax() untuk kolom responsif, dan kendalikan track implisit. Kamu berlatih Frontend 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 Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend 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 “CSS Grid: template-areas, auto-fit, 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 Frontend Academy ini?
Ya. Setiap pelajaran Frontend 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
- Pendalaman Flexbox: Perataan, Pembungkusan, Urutan
- CSS Grid: template-areas, auto-fit, minmax
- Menggabungkan Flexbox dan Grid
- Variabel CSS untuk Tema