Belajar Css #9: Css Grid

Bid TIK Polda Kepri

Css Grid | Pernahkah Anda pusing mengatur tata letak website dengan float, position absolute, atau bahkan Flexbox, tapi tetap merasa kurang fleksibel? 🤯 Jangan khawatir! CSS Grid hadir sebagai solusi canggih untuk membuat tata letak yang rapi, fleksibel, dan efisien!

Dengan CSS Grid, Anda bisa:

✅ Membuat layout multikolom dengan mudah.
✅ Mengatur elemen secara presisi tanpa ribet.
✅ Menghemat waktu coding dengan baris & kolom otomatis.

Siap belajar? Yuk, langsung kita bahas! 🚀

1. Apa Itu CSS Grid?

CSS Grid adalah sistem layout berbasis grid yang memungkinkan Anda mengatur elemen dalam dua dimensi (baris dan kolom). Berbeda dengan Flexbox yang bekerja dalam satu dimensi, CSS Grid memungkinkan pengaturan elemen lebih kompleks dan responsif.

Contoh dasar penggunaan CSS Grid:

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 100px 100px;
}

🎯 Penjelasan:

• display: grid; → Mengaktifkan mode grid pada elemen.
• grid-template-columns: 200px 200px 200px; → Membuat 3 kolom, masing-masing 200px.
• grid-template-rows: 100px 100px; → Membuat 2 baris, masing-masing 100px.

2. Membuat Grid Responsif dengan fr (Fractional Unit)

Menggunakan satuan fr, Anda bisa membuat layout yang fleksibel tanpa harus menentukan ukuran piksel secara manual.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

📌 Penjelasan:

• 1fr 2fr 1fr → Kolom pertama dan ketiga memiliki ukuran yang sama, sedangkan kolom tengah 2 kali lebih besar.

✅ Tips: Gunakan fr untuk membuat layout yang dinamis dan responsif tanpa harus menghitung piksel!

3. Mengatur Jarak Antar Elemen dengan gap

Mau kasih jarak antar elemen tanpa repot pakai margin? Gunakan gap!

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

📌 Penjelasan:

• gap: 20px; → Memberikan jarak 20px antar kolom dan baris.
• repeat(3, 1fr); → Membuat 3 kolom dengan ukuran yang sama.

✅ Tips: Bisa juga pakai column-gap dan row-gap jika ingin mengatur jarak secara terpisah!

4. Mengontrol Posisi Elemen dengan grid-column & grid-row

Anda bisa mengatur elemen agar menempati lebih dari satu kolom atau baris dengan properti grid-column dan grid-row.

.item {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

📌 Penjelasan:

• grid-column: 1 / 3; → Elemen akan membentang dari kolom 1 hingga 3.
• grid-row: 1 / 3; → Elemen akan membentang dari baris 1 hingga 3.

✅ Tips: Gunakan span untuk cara yang lebih simpel!

.item {
  grid-column: span 2;
  grid-row: span 2;
}

5. CSS Grid vs Flexbox: Kapan Harus Menggunakan yang Mana?

🔹 Gunakan CSS Grid jika:
✅ Layout membutuhkan struktur 2 dimensi (baris & kolom).
✅ Elemen memiliki posisi yang spesifik & kompleks.

🔹 Gunakan Flexbox jika:
✅ Layout satu dimensi (hanya baris atau kolom).
✅ Elemen memiliki konten dinamis yang berubah-ubah.

🎯 Pro Tip: Kombinasikan Grid untuk layout utama, dan Flexbox untuk elemen dalam grid agar lebih fleksibel!

6. Contoh Project: Membuat Layout Website dengan CSS Grid

Coba buat layout sederhana berikut dengan CSS Grid! 🔥

Html:

<div class="container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>

Css:

 .container {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
     grid-template-rows: auto;
     gap: 20px;
     padding: 20px;
 }
 .header {
     grid-column: 1 / -1;
     background-color: lightblue;
     padding: 20px;
     text-align: center;
     font-size: 20px;
 }
 .sidebar {
     grid-column: 1 / 2;
     background-color: lightgray;
     padding: 20px;
 }
 .content {
     grid-column: 2 / 3;
     background-color: white;
     padding: 20px;
     border: 1px solid #ddd;
 }
 .footer {
     grid-column: 1 / -1;
     background-color: lightgreen;
     padding: 20px;
     text-align: center;
     font-size: 18px;
 }

📌 Penjelasan:

• .header dan .footer membentang di seluruh kolom.
• .sidebar ada di kolom pertama.
• .content ada di tengah.

✅ Hasil: Anda akan mendapatkan layout website yang responsif dan rapi!

Kesimpulan: Buat Layout Website Lebih Mudah dengan CSS Grid!

🎯 Kenapa Harus CSS Grid?

✅ Lebih simpel & rapi dibanding float atau position.

✅ Mendukung layout 2D yang fleksibel & responsif.

✅ Bisa dikombinasikan dengan Flexbox untuk kontrol lebih baik.

🚀 Sekarang giliran Anda! Coba eksperimen dengan CSS Grid dan buat layout impian Anda! Jika ada pertanyaan, langsung tulis di komentar ya! 😉