FluentStack

Grid Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 3: CSS Fundamentals and LayoutBeginner45 menitBahasa Indonesia

Grid Dasar

Pahami CSS Grid sebagai cara menyusun elemen dalam baris dan kolom.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami CSS Grid sebagai layout dua arah
  • Menggunakan display: grid
  • Menggunakan grid-template-columns
  • Menggunakan gap
  • Membuat card grid sederhana
CSSGridLayout

Isi lesson

7 blok
  1. 1.
    Grid menyusun baris dan kolomBelum selesaiWajib
  2. 2.
    HTML card gridBelum selesaiWajib
  3. 3.
    CSS grid sederhanaBelum selesaiWajib
  4. 4.
    Jangan memaksa Flexbox untuk semua layoutBelum selesaiOpsional
  5. 5.
    Cek pemahamanBelum selesaiWajib
  6. 6.
    Coding practiceBelum selesaiWajib
  7. 7.
    RingkasanBelum selesaiWajib

Grid menyusun baris dan kolom

Wajib

CSS Grid cocok untuk layout dua arah: baris dan kolom. Grid container dibuat dengan display: grid. grid-template-columns menentukan struktur kolom. gap memberi jarak antar item.

Grid sering dipakai untuk card gallery, product grid, dashboard section, atau daftar item yang perlu tersusun dalam beberapa kolom.

Bagian ini memengaruhi progres lesson.

HTML card grid

Wajib
html
<section class="cards">
  <article class="card">Card 1</article>
  <article class="card">Card 2</article>
  <article class="card">Card 3</article>
</section>

.cards akan menjadi grid container. Setiap .card menjadi item di dalam grid.

Bagian ini memengaruhi progres lesson.

CSS grid sederhana

Wajib
css
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

display: grid mengaktifkan Grid. grid-template-columns membuat tiga kolom. gap memberi jarak antar card.

Bagian ini memengaruhi progres lesson.

Tips

Opsional

Jangan memaksa Flexbox untuk semua layout

Jika layout butuh banyak baris dan kolom, Grid sering membuat struktur lebih jelas daripada memaksa Flexbox.

Opsional, tidak menghambat penyelesaian lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Property apa yang biasanya dipakai untuk menentukan jumlah atau ukuran kolom di CSS Grid?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Membuat card grid sederhana

Latihan memakai CSS Grid untuk menyusun beberapa card dalam kolom.

Tujuan awal: Targetkan .cards.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

8 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • Grid cocok untuk layout baris dan kolom.
  • display: grid dipasang di parent.
  • grid-template-columns menentukan kolom.
  • gap memberi jarak antar card.
  • Berikutnya kamu akan belajar kapan memakai Flexbox atau Grid.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Grid menyusun baris dan kolom.

Memuat progresReview module