CSS Grid

Apa Itu CSS Grid?

CSS Grid adalah teknik layout dua dimensi (baris dan kolom) yang memungkinkan kamu menyusun elemen secara rapi dan fleksibel dalam bentuk grid.

Berbeda dengan Flexbox (1 dimensi), Grid bisa mengatur elemen secara horizontal dan vertikal sekaligus.

Struktur Dasar CSS Grid

Berikut ini adalah struktur dasar css grid.

Kode html:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Kode cssnya:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 kolom */
}

Properti Dasar Grid Container

Properti grid container memiliki beberapa properti pendukung lainnya untuk membuat tampilan website lebih menarik. Beberapa properti pendukungnya adalah sebagai berikut:

1. display: grid;

Fungsinya mengaktifkan sistem grid pada elemen induk (container).

Contoh:

.grid-container {
  display: grid;
}

2. grid-template-columns

Fungsinya untuk menentukan jumlah dan ukuran kolom.

Contoh:

/* Tiga kolom dengan ukuran sama */
grid-template-columns: 1fr 1fr 1fr;

/* Kolom pertama 200px, dua lainnya fleksibel */
grid-template-columns: 200px 1fr 1fr;

3. grid-template-rows

Fungsinya untuk menentukan jumlah dan ukuran baris.

Contoh:

grid-template-rows: 100px 200px;

4. gap

Fungsinya untuk memberi jarak antar kolom dan baris.

Contoh:

gap: 20px;

Properti Grid Item

Properti grid item juga memiliki beberapa properti pendukung lainnya untuk membuat tampilan website lebih menarik. Beberapa properti pendukungnya adalah sebagai berikut:

1. grid-column

Fungsinya untuk menentukan posisi kolom item.

Contoh:

.item {
  grid-column: 1 / 3; /* dari kolom 1 ke kolom sebelum 3 */
}

2. grid-row

Fungsinya untuk menentukan posisi baris item.

Contoh:

.item {
  grid-row: 2 / 4;
}

Contoh Layout Sederhana dengan Grid

Berikut ini adalah contoh penulisan kode lengkap penggunakan grid.

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding: 20px;
      background-color: #e0f7fa;
    }

    .item {
      background-color: #00796b;
      color: white;
      padding: 40px;
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>

</body>
</html>

Hasilnya:

css-grid

Tips CSS Grid

Gunakan repeat(n, 1fr) untuk membuat banyak kolom dengan ukuran sama

Gunakan minmax() agar grid tetap responsif

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Kombinasikan dengan media queries untuk tampilan mobile

Perbedaan Grid vs Flexbox

Meskipun memiliki fungsi yang hampir mirip dengan flexbox, namun grid memiliki perbedaan yang dapat dilihat pada tabel berikut ini:

Flexbox	CSS Grid
1 dimensi (baris/kolom saja)	2 dimensi (baris dan kolom)
Cocok untuk elemen sejajar	Cocok untuk layout kompleks
Urutan elemen penting	Posisi bisa ditentukan bebas

Kesimpulan

CSS Grid sangat berguna untuk:

Galeri gambar
Layout dashboard
Struktur website profesional

Dengan memahami CSS Grid, kamu bisa membangun desain web yang modern, fleksibel, dan responsif.