Subgrid untuk Konten Bertingkat yang Sejajar
Gunakan subgrid untuk menyejajarkan item grid bertingkat dengan track grid induknya.
Subgrid untuk Konten Bertingkat yang Sejajar 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.
Masalah Subgrid
Tantangan yang umum: Anda memiliki grid kartu, yang masing-masing berisi header, isi, dan footer. Tanpa subgrid, item dalam kartu yang berbeda tidak dapat diratakan pada garis dasar yang sama karena setiap kartu merupakan tata letak independen.
Apa itu Subgrid?
subgrid adalah nilai untuk grid-template-columns atau grid-template-rows yang membuat grid bersarang mewarisi dan ikut berpartisipasi dalam definisi jalur grid induknya.
grid-template-rows: subgrid
Item grid yang juga merupakan kontainer grid dapat menggunakan subgrid untuk menyelaraskan elemen turunannya dengan jalur grid induk:
<div class="card-grid">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
</div>grid-template-columns: subgrid
Demikian pula, subgrid pada kolom memungkinkan item bersarang diselaraskan dengan jalur kolom induk — berguna untuk pasangan label–nilai atau kolom formulir yang sejajar di antara kolom kartu.
Subgrid vs align-content
Tanpa subgrid, Anda dapat menyelaraskan konten sebagian menggunakan align-content atau tinggi tetap, tetapi cara ini rapuh. Subgrid memungkinkan penyelarasan nyata yang didasarkan pada tinggi konten sebenarnya.
Subgrid untuk Penyelarasan Formulir
Menyelaraskan pasangan label–masukan di beberapa kolom formulir:
<div class="form-grid">
<div class="form-section">
<label>Name</label><input placeholder="Name" />
<label>Email</label><input placeholder="Email" />
</div>
</div>Subgrid Membentang di Baris dan Kolom
Subgrid dapat membentang di beberapa jalur induk dan mewarisi jalur dari kedua arah:
<div class="layout"><div class="feature">Feature spans grid</div></div>Area Bernama dengan Subgrid
Ketika subgrid mewarisi jalur bernama dari induknya, nama-nama tersebut tersedia untuk penempatan di dalam kontainer subgrid.
Pewarisan Celah
Subgrid secara bawaan mewarisi nilai gap dari grid induknya. Grid bersarang tersebut ikut berpartisipasi dalam sistem celah yang sama.
Catatan Dukungan Peramban
Subgrid telah tersedia di Firefox sejak 2019. Chrome menambahkan dukungan pada 2023. Semua peramban modern kini mendukungnya. Pastikan dukungannya sesuai dengan target pengguna Anda sebelum menggunakannya dalam produksi.
Peningkatan Bertahap dengan Subgrid
Sediakan cadangan untuk peramban lama menggunakan tinggi tetap atau penyelarasan Flexbox sebelum menambahkan subgrid sebagai peningkatan:
<div class="card-grid"><div class="card">Card content</div></div>Pemeriksaan Singkat
Apa yang dilakukan grid-template-rows: subgrid pada suatu item grid?
Ringkasan
Subgrid mengatasi masalah penyelarasan konten grid bersarang, seperti grid kartu yang item-itemnya berada di kartu terpisah tetapi perlu sejajar pada garis dasar yang sama. Gunakan grid-template-rows: subgrid pada item grid yang membentang di beberapa baris, dan grid-template-columns: subgrid untuk konten bersarang yang sejajar dalam kolom. Dukungan peramban modern kini sudah universal.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Subgrid untuk Konten Bertingkat yang Sejajar” gratis?
Ya — teks lengkap “Subgrid untuk Konten Bertingkat yang Sejajar” 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 “Subgrid untuk Konten Bertingkat yang Sejajar”?
Gunakan subgrid untuk menyejajarkan item grid bertingkat dengan track grid induknya. 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 “Subgrid untuk Konten Bertingkat yang Sejajar” 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
- Line Bernama dan Area Grid Bernama
- Auto-fit dan Auto-fill dengan minmax
- Grid Implisit dan Grid-Auto-Flow
- Subgrid untuk Konten Bertingkat yang Sejajar