Area Templat Grid
Beri nama area grid dengan grid-template-areas untuk tata letak yang mudah dibaca dan semantis.
Area Templat Grid adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Area Grid Bernama
grid-template-areas memungkinkan Anda menamai wilayah grid menggunakan ilustrasi ASCII. Hal ini membuat tata letak lebih mudah dibaca dan dipelihara.
Mendefinisikan Area Templat
Setiap string yang diapit tanda kutip mewakili satu baris. Sel dengan nama yang sama membentuk area persegi panjang. Gunakan . untuk sel kosong.
<div class="page" style="min-height:240px;">
<header style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<aside style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</aside>
<main style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Menempatkan Elemen berdasarkan Nama
Tetapkan elemen grid ke area bernama menggunakan properti grid-area dengan nama area tersebut tanpa tanda kutip:
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'header header' 'sidebar main' 'footer footer';min-height:220px;gap:4px;">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<div class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<main style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
<footer style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>Aturan untuk Area Templat
Area bernama harus berbentuk persegi panjang. Setiap sel hanya boleh menjadi bagian dari satu area. Nama area tidak boleh muncul di sel yang terpisah karena hal itu tidak valid.
Sel Kosong dengan .
Gunakan satu titik atau lebih untuk menandai sel kosong dalam grid-template-areas:
<div class="layout" style="display:grid;min-height:200px;">
<div style="grid-area:logo;background:#4f8cff22;border:1px solid #4f8cff;">Logo</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:sidebar;background:#b57bff22;border:1px solid #b57bff;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Area Responsif dengan Kueri Media
Tentukan ulang grid-template-areas dalam kueri media untuk mengubah struktur tata letak secara menyeluruh:
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Narrow (default) preview below. Widen your browser to ≥768px to see the media query apply the two-column layout live.</p>
<div class="page" style="min-height:200px;margin-bottom:16px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Preview of the ≥768px layout (static reference — not driven by the media query):</p>
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-areas:'header header' 'sidebar main' 'footer footer';gap:4px;min-height:160px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Garis Bernama yang Dibuat Otomatis
Saat Anda menamai sebuah area, CSS secara otomatis membuat garis grid bernama: area-start dan area-end untuk baris maupun kolom.
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'aside main' 'aside main';gap:0;min-height:160px;">
<div style="grid-area:aside;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Aside</div>
<div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content</div>
<div class="overlay" style="grid-row:1/3;background:rgba(255,99,71,0.3);border:2px dashed tomato;padding:4px;">Overlay via named lines main-start / main-end</div>
</div>Menggabungkan Area dan Nomor Garis
Area bernama dan nomor garis eksplisit dapat digunakan bersama dalam grid yang sama. Elemen dapat ditempatkan berdasarkan nama, garis, atau span.
Alur Kerja Desain Grid Visual
Alur kerja yang umum: buat sketsa tata letak terlebih dahulu dalam area templat, lalu tentukan ukuran kolom dan baris. Dengan cara ini, struktur dipisahkan dari urusan penentuan ukuran.
<div class="dashboard" style="display:grid;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;">Header</div>
<div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
<div style="grid-area:ads;background:#b57bff22;border:1px solid #b57bff;">Ads</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>Area Templat dan Aksesibilitas
Urutan visual grid dapat berbeda dari urutan sumber DOM. Pembaca layar mengikuti urutan DOM, bukan penempatan visual. Pastikan urutan DOM tetap masuk akal meskipun elemen diurutkan ulang secara visual oleh penempatan grid.
Singkatan grid-template
Gabungkan grid-template-areas, grid-template-columns, dan grid-template-rows dalam satu deklarasi grid-template.
<div class="page" style="display:grid;min-height:200px;">
<div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
<div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</div>
<div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>Pemeriksaan Cepat
Dalam grid-template-areas, karakter apa yang digunakan untuk menandai sel kosong?
Rangkuman
grid-template-areas menggunakan ilustrasi ASCII untuk menamai wilayah tata letak. Elemen ditempatkan dengan grid-area: name. Area harus berbentuk persegi panjang, dan sel kosong menggunakan .. Tentukan ulang area dalam kueri media untuk membuat tata letak yang sepenuhnya responsif dengan CSS yang rapi dan mudah dibaca.
Belajar CSS dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 40
- Pelajaran
- 159
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Area Templat Grid” gratis?
Ya — teks lengkap “Area Templat Grid” 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 “Area Templat Grid”?
Beri nama area grid dengan grid-template-areas untuk tata letak yang mudah dibaca dan semantis. 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 4 dari 4.
Berapa lama pelajaran “Area Templat Grid” 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