0Pricing
CSS Academy · Pelajaran

Grid Implisit dan Grid-Auto-Flow

Pahami cara CSS Grid menangani item di luar track eksplisit dengan baris dan kolom implisit.

Grid Implisit dan Grid-Auto-Flow 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.

Grid Eksplisit vs Implisit

Grid eksplisit ditentukan oleh grid-template-columns dan grid-template-rows. Saat item melampaui jalur yang ditentukan ini, peramban secara otomatis membuat jalur implisit.

grid-auto-rows

Menentukan ukuran jalur baris yang dibuat secara implisit. Tanpa properti ini, baris implisit akan berukuran sesuai kontennya (auto).

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

grid-auto-rows dengan minmax

Buat baris implisit dengan tinggi minimal tertentu, tetapi tetap dapat melebar:

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

Menentukan ukuran jalur kolom implisit saat item ditempatkan di luar rentang kolom eksplisit:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

Mengontrol cara algoritma penempatan otomatis menempatkan item:

  • row (bawaan)—tempatkan dalam baris dan tambahkan baris baru sesuai kebutuhan
  • column—tempatkan dalam kolom dan tambahkan kolom baru
  • row dense—isi celah secara agresif dengan menelusuri kembali
  • column dense—pengisian rapat dalam arah kolom

grid-auto-flow: dense

dense membuat algoritma mencoba mengisi lubang yang ditinggalkan oleh item yang membentang lebar. Hal ini dapat menyebabkan item muncul tidak sesuai urutan.

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

Pola Kolom Alur Otomatis

Deretan kartu dengan pengguliran horizontal, dengan kolom yang bertambah sesuai kebutuhan:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

Pengisian Rapat untuk Galeri

Galeri foto dengan ukuran yang beragam dan mengisi celah:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

Grid Implisit dan Area Bernama

Area bernama hanya berlaku pada grid eksplisit. Item yang ditempatkan dalam grid implisit tidak dapat menggunakan penempatan berdasarkan area bernama secara langsung—item tersebut memerlukan penempatan berdasarkan nomor garis atau span.

Memvisualisasikan Grid Implisit

Di Chrome DevTools, hamparan tata letak menampilkan garis grid eksplisit (garis utuh) dan implisit (garis putus-putus). Hal ini membantu Anda memahami lokasi item yang ditempatkan secara otomatis.

Mengontrol Ukuran Implisit per Item

Item yang membentang di beberapa baris dalam grid implisit memerlukan grid-auto-rows agar ukurannya benar. Tanpa properti ini, baris implisit akan menyesuaikan ukuran konten sehingga dapat menghasilkan tata letak yang tidak merata.

Pemeriksaan Singkat

Apa yang dilakukan grid-auto-flow: row dense?

Ringkasan

Grid implisit memperluas grid eksplisit dengan jalur yang dibuat otomatis. grid-auto-rows/columns mengontrol ukurannya; minmax() membuatnya fleksibel. grid-auto-flow menentukan arah penempatan. Pengisian dense mengisi celah secara agresif—berguna untuk tata letak bergaya masonry, tetapi dapat merusak urutan visual.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Grid Implisit dan Grid-Auto-Flow” gratis?

Ya — teks lengkap “Grid Implisit dan Grid-Auto-Flow” 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 “Grid Implisit dan Grid-Auto-Flow”?

Pahami cara CSS Grid menangani item di luar track eksplisit dengan baris dan kolom implisit. 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 “Grid Implisit dan Grid-Auto-Flow” 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

  1. Line Bernama dan Area Grid Bernama
  2. Auto-fit dan Auto-fill dengan minmax
  3. Grid Implisit dan Grid-Auto-Flow
  4. Subgrid untuk Konten Bertingkat yang Sejajar
← Kembali ke CSS Academy