Gap dan Penempatan Grid
Tambahkan jarak antar sel grid dengan gap dan tempatkan item menggunakan grid-column serta grid-row.
Gap dan Penempatan Grid adalah pelajaran CSS 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 CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.
Jarak dalam CSS Grid
Properti gap mengatur ruang di antara baris dan kolom grid. Properti ini menggantikan properti grid-gap yang lebih lama dan juga berfungsi dalam Flexbox.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>row-gap dan column-gap
Atur jarak baris dan kolom secara terpisah:
<div class="grid" style="display:grid;grid-template-columns:repeat(3, 1fr);">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
<div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
<div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">5</div>
<div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">6</div>
</div>Nomor Garis Grid
CSS Grid memberi nomor pada garisnya mulai dari 1. Grid dengan 3 kolom memiliki garis kolom 1, 2, 3, 4. Nomor negatif dihitung dari akhir: -1 adalah garis terakhir, sedangkan -2 adalah garis kedua dari terakhir.
grid-column dan grid-row
Tempatkan elemen secara manual menggunakan nomor garis dengan grid-column dan grid-row:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:8px;">
<div class="header" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (spans all 3 columns, row 1)</div>
<div class="main" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (spans 2 columns, row 2)</div>
</div>Kata Kunci Span
Gunakan span untuk menyatakan jumlah jalur yang harus dicakup elemen, bukan nomor garis absolut:
<div style="display:grid;grid-template-columns:repeat(4, 60px);grid-auto-rows:60px;gap:8px;">
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div class="featured" style="background:#4f8cff22;border:1px solid #4f8cff;padding:4px;">Featured (span 2x2)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Nomor Garis Negatif
Indeks negatif dihitung dari akhir. 1 / -1 selalu mencakup seluruh lebar grid, berapa pun jumlah kolomnya:
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="full-width" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Full width (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item</div>
</div>Singkatan grid-area
grid-area menetapkan keempat nilai penempatan grid dalam satu properti: row-start / column-start / row-end / column-end.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:60px;gap:0;">
<div class="hero" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Hero (row 1 start, col 1 start, row 2 end, last column)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;"></div>
</div>Penempatan Otomatis
Elemen yang tidak ditempatkan secara eksplisit akan ditempatkan otomatis di sel tersedia berikutnya, mengikuti algoritme grid-auto-flow. Secara bawaan, peramban mengisi sel dari kiri ke kanan, lalu dari atas ke bawah.
justify-items dan align-items pada Grid
Pada wadah grid, justify-items meratakan konten sel secara horizontal, sedangkan align-items meratakannya secara vertikal. Keduanya secara bawaan menggunakan stretch.
<div class="grid" style="min-height:120px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;width:fit-content;">centered, top-aligned item</div>
</div>justify-self dan align-self
Elemen grid individual dapat mengesampingkan perataan wadah menggunakan justify-self dan align-self:
<div style="display:grid;grid-template-columns:1fr;min-height:120px;">
<div class="featured-card" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Stretched horizontally, centered vertically</div>
</div>Elemen Grid yang Bertumpang Tindih
Beberapa elemen dapat menempati sel grid yang sama. Gunakan z-index untuk mengontrol elemen mana yang tampil di atas. Hal ini memungkinkan desain berlapis, seperti gambar dengan teks pelapis.
<div style="display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, 60px);">
<div class="image" style="background:#4f8cff44;border:1px solid #4f8cff;">Image layer</div>
<div class="caption" style="background:rgba(0,0,0,0.6);color:#fff;align-self:end;padding:4px 8px;">Caption overlay</div>
</div>Pemeriksaan Cepat
Sebuah elemen memiliki grid-column: 2 / span 3. Kolom mana saja yang ditempatinya dalam grid dengan 5 kolom?
Rangkuman
gap menambahkan jarak di antara sel grid. Elemen ditempatkan menggunakan nomor garis dengan grid-column dan grid-row. Kata kunci span menentukan jumlah jalur yang dicakup. Gunakan 1 / -1 agar selalu mencakup semua kolom. Elemen grid dapat bertumpang tindih menggunakan z-index.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Gap dan Penempatan Grid” gratis?
Ya — teks lengkap “Gap dan Penempatan 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 “Gap dan Penempatan Grid”?
Tambahkan jarak antar sel grid dengan gap dan tempatkan item menggunakan grid-column serta grid-row. 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 3 dari 4.
Berapa lama pelajaran “Gap dan Penempatan 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