Level 7
Pertemuan 6

CSS Grid untuk Inventory dan Level Map

Menggunakan CSS Grid untuk membuat layout grid yang presisi untuk inventory dan level selection.

Sword
Potion
Key
Map
Gem
Boots
Book
Coin
Bow
Ring
Food
Torch
Armor
Herb
Orb
Empty

Tujuan Pembelajaran

Memahami fungsi CSS Grid untuk layout dua dimensi.
Menggunakan grid-template-columns, grid-template-rows, dan gap.
Membuat inventory grid 4x4 dan level selection grid.

Grid Basics

Grid cocok ketika layout perlu mengatur baris dan kolom secara bersamaan. 

              
                .inventory { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 80px); gap: 12px; }

Inventory Grid 4x4

Output utama: inventory grid yang presisi dan mudah dibaca.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Level Selection Grid

Gunakan visual lock/unlock status agar pemain tahu level mana yang bisa dipilih.

1 Open
2 Open
3 Open
4 Locked
5 Locked
6 Locked

Mini Challenge

  1. Buat inventory grid 4x4.
  2. Isi minimal 8 slot dengan item.
  3. Buat level selection grid dengan status lock/unlock.
  4. Atur gap agar interface tidak terlalu padat.

Mini Quiz

Property untuk membuat 4 kolom grid adalah...

Penutup

Output pertemuan: inventory grid dan level selection interface.