CSS Grid untuk Tata Letak
Tentukan baris dan kolom dengan CSS Grid, tempatkan item secara tepat, dan buat tata letak halaman umum dengan kode minimal.
CSS Grid untuk Tata Letak adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.
Apa Itu CSS Grid?
CSS Grid adalah sistem tata letak dua dimensi — Anda mengontrol baris dan kolom. Ini adalah alat terbaik untuk struktur halaman secara keseluruhan dan penempatan elemen secara eksplisit pada kisi yang ditentukan.
Mendefinisikan Kolom: grid-template-columns
grid-template-columns mendefinisikan struktur kolom. Gunakan ukuran tetap (px), pecahan fleksibel (fr), atau auto. repeat(n, size) mengulangi definisi jalur.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}Unit fr
fr (unit pecahan) mendistribusikan sisa ruang secara proporsional. 1fr 2fr memberikan kolom kedua ruang dua kali lebih banyak daripada kolom pertama. Penting untuk jalur kisi yang fleksibel.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}Mendefinisikan Baris: grid-template-rows
Anda juga dapat mendefinisikan baris secara eksplisit. Jika tidak, peramban secara otomatis membuat baris implisit. grid-auto-rows: minmax(200px, auto) mengatur ukuran baris implisit.
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}gap dalam Grid
Sama seperti Flexbox, gap menambahkan ruang di antara jalur kisi tanpa memengaruhi tepi luar. row-gap dan column-gap mengontrol sumbu secara terpisah.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
Beri nama area kisi menggunakan string dan tetapkan elemen ke area tersebut dengan grid-area. Ini menghasilkan kode tata letak visual yang mudah dibaca.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Menempatkan Item dengan grid-column dan grid-row
Kontrol lokasi item secara tepat dengan grid-column: start / end dan grid-row: start / end. Gunakan -1 untuk merujuk ke garis terakhir. span N mencakup N jalur.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit dan minmax() — Kolom Responsif
Satu baris kode kisi responsif yang paling kuat: repeat(auto-fit, minmax(280px, 1fr)). Membuat kolom sebanyak yang dapat ditampung, masing-masing selebar minimal 280px, lalu mengisi sisa ruang dengan 1fr.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill vs auto-fit
auto-fill membuat jalur meskipun kosong, sehingga kisi tetap. auto-fit menciutkan jalur kosong agar item meluas mengisi baris. Gunakan auto-fit untuk konten yang harus merentang.
Kisi Implisit vs Eksplisit
Jalur yang Anda definisikan disebut kisi eksplisit. Saat Anda menambahkan lebih banyak item daripada jalur yang didefinisikan, peramban membuat jalur implisit. Kontrol ukurannya dengan grid-auto-rows dan grid-auto-columns.
Grid vs Flexbox — Kapan Menggunakan Masing-Masing
Grid: tata letak dua dimensi, struktur halaman, galeri, dasbor. Flexbox: baris atau tumpukan satu dimensi, pemusatan, dan pendistribusian item dalam baris. Keduanya saling melengkapi — gunakan Grid untuk kerangka halaman dan Flexbox untuk bagian dalam komponen.
Pemeriksaan Singkat
Nilai CSS mana yang membuat kolom selebar minimal 250px dan membagi sisa ruang secara merata?
Ringkasan: CSS Grid
grid-template-columns mendefinisikan kolom. fr membagi ruang. repeat() menyederhanakan pengulangan. gap menambahkan jarak antarjalur. grid-template-areas membuat tata letak mudah dibaca. auto-fit + minmax membuat kisi responsif tanpa kueri media. Grid adalah pilihan utama untuk tata letak halaman dua dimensi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “CSS Grid untuk Tata Letak” gratis?
Ya — teks lengkap “CSS Grid untuk Tata Letak” 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 untuk Tata Letak”?
Tentukan baris dan kolom dengan CSS Grid, tempatkan item secara tepat, dan buat tata letak halaman umum dengan kode minimal. 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 3 dari 4.
Berapa lama pelajaran “CSS Grid untuk Tata Letak” 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
- Tag Meta Area Tampilan
- Flexbox untuk Tata Letak
- CSS Grid untuk Tata Letak
- Kueri Media dan Pengembangan Mobile-First