Level 6
Pertemuan 6

Cover

Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.

Gallery

What is Grid?

📊 Apa itu CSS Grid?

  • Grid = 2D layout system (rows AND columns)
  • Powerful untuk template layout kompleks
  • Perfect untuk gallery dengan fixed columns
  • Lebih kontrol daripada Flexbox untuk structured layout
Flexbox (1D):
Untuk single row/column
Grid (2D):
Untuk rows & columns sekaligus

Grid Example

💻 Grid Code Example

.gallery {
   display : grid ;
   grid-template-columns : repeat(3, 1fr) ;
   gap : 20px ;
}
Penjelasan:
• display: grid = Aktifkan grid
• repeat(3, 1fr) = 3 kolom equal width
• gap: 20px = Spacing antar items

Demo Grid Layout

Demo Grid Layout

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Ubah `repeat(3, 1fr)` untuk mencoba 2/3/4 kolom.

Flexbox vs Grid

⚖️ Flexbox vs Grid

🔵 Flexbox (1D Layout)
• Single row atau column
• Lebih fleksibel untuk wrapping
• Cocok untuk navigation, buttons, simple lists
🟢 Grid (2D Layout)
• Rows AND columns sekaligus
• Lebih structured & organized
• Cocok untuk gallery, dashboard, template design
💡 Pilihan: Untuk art gallery kalian, Grid LEBIH COCOK karena punya structure baris & kolom yang jelas!

Activity

🎯 Your Activity

  1. Apply Grid to gallery
    Update CSS dengan display: grid
  2. Try different column counts
    Coba repeat(2, 1fr) , repeat(3, 1fr) , repeat(4, 1fr)
  3. Compare with Flexbox
    Mana yang lebih cocok untuk gallery kalian? Flexbox atau Grid?
  4. Customize styling
    Adjust gap, add shadows, borders untuk polish
  5. Screenshot & share!
    Show final gallery layout