Display Grid serta Kolom dan Baris Templat
Aktifkan CSS Grid dan tentukan jalur kolom serta baris menggunakan grid-template-columns dan rows.
Display Grid serta Kolom dan Baris Templat adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Mengaktifkan Kisi CSS
Kisi CSS diaktifkan dengan display: grid pada wadah. Anak-anak langsungnya otomatis menjadi elemen kisi yang ditempatkan ke dalam sel.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>grid-template-columns
grid-template-columns menentukan jumlah dan ukuran kolom. Setiap nilai membuat satu jalur kolom.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</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>grid-template-rows
grid-template-rows menentukan jalur baris eksplisit. Elemen yang melebihi baris yang ditentukan akan membuat baris implisit.
<div class="layout" style="min-height:220px;">
<div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
<div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>Jalur Kolom dan Baris
Setiap nilai dalam grid-template-columns atau grid-template-rows membuat satu jalur. Jalur dapat menggunakan satuan ukuran apa pun:
- Tetap:
200px,10rem - Fleksibel:
1fr - Berbasis konten:
auto,min-content,max-content
Satuan fr
fr (satuan pecahan) membagi ruang yang tersedia setelah ukuran tetap dikurangi. 1fr 2fr membuat kolom dengan rasio 1:2.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>Auto pada Jalur
auto pada jalur menyesuaikan ukurannya dengan konten. Sebagai kolom, ukurannya mengikuti kebutuhan minimum sel terlebarnya; sebagai baris, ukurannya mengikuti sel tertinggi.
<div class="sidebar-layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>Contoh Tata Letak Halaman
Contoh tata letak halaman tiga baris yang umum, dengan kepala halaman, bagian utama, dan kaki halaman:
<div class="page">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
<footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>Singkatan grid-template
grid-template menggabungkan baris dan kolom:
<div class="grid" style="display:grid;min-height:180px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>Memeriksa Grid di DevTools
DevTools Chrome dan Firefox dapat menampilkan garis jalur grid di atas halaman. Klik lencana grid di panel Elemen untuk melihat kolom, baris, jarak, dan area bernama.
Memilih antara Grid dan Flexbox
Gunakan Grid saat Anda perlu mengontrol baris dan kolom secara bersamaan. Gunakan Flexbox untuk tata letak satu dimensi, seperti barisan elemen atau kolom elemen. Banyak tata letak menggunakan keduanya.
Nomor Garis
Grid secara otomatis memberi nomor pada garisnya mulai dari 1. Anda dapat merujuk pada nomor ini untuk menempatkan elemen secara manual. Garis kolom bernomor dari 1 hingga n+1, dengan n sebagai jumlah kolom.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>Pemeriksaan Cepat
Apa yang dibuat oleh grid-template-columns: 200px 1fr 2fr?
Rangkuman
display: grid membuat wadah grid. grid-template-columns dan grid-template-rows menentukan jalur. Satuan fr membagi ruang yang tersisa secara proporsional. auto menyesuaikan ukuran dengan konten. Grid ideal untuk mengontrol tata letak dua dimensi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Display Grid serta Kolom dan Baris Templat” gratis?
Ya — teks lengkap “Display Grid serta Kolom dan Baris Templat” 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 “Display Grid serta Kolom dan Baris Templat”?
Aktifkan CSS Grid dan tentukan jalur kolom serta baris menggunakan grid-template-columns dan rows. 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 1 dari 4.
Berapa lama pelajaran “Display Grid serta Kolom dan Baris Templat” 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