Belajar CSS Part 6: Grid Layout

by

Setelah memahami Flexbox Layout di Part 5, sekarang kita akan membahas teknik layout yang lebih kuat dan fleksibel: CSS Grid Layout.

Di Part 6 ini, kamu akan belajar tentang:

  • Bagaimana CSS Grid bekerja dalam layout
  • Properti-properti dasar CSS Grid
  • Bagaimana membuat layout responsif dan kompleks dengan Grid

Apa Itu CSS Grid Layout?

CSS Grid Layout adalah sistem layout dua dimensi yang memungkinkan kita untuk membuat desain web yang lebih kompleks dengan kontrol yang lebih besar terhadap baris dan kolom.

Berbeda dengan Flexbox yang bekerja di satu dimensi (baik horizontal atau vertikal), CSS Grid bekerja di dua dimensi sekaligus (horizontal dan vertikal).

Grid Container dan Grid Items

Untuk membuat grid layout, kita mengatur elemen induk (container) menggunakan display: grid;, dan elemen anak (items) di dalamnya secara otomatis menjadi grid items yang dapat kita atur menggunakan properti grid. 

.container { display: grid; }

Perbedaan Grid dan Flexbox

  • Flexbox → fokus pada 1 arah (row atau column)
  • Grid → bisa mengatur baris dan kolom sekaligus (2 dimensi)

Grid cocok untuk layout halaman (layout besar)
Flexbox cocok untuk komponen kecil (navbar, card, dll)

Konsep Penting Grid

Saat kita pakai display: grid;, kita bisa mengatur:

  • Jumlah kolom → grid-template-columns
  • Jumlah baris → grid-template-rows
  • Jarak → gap
  • Posisi item → grid-column, grid-row

Ringkasan pada grid

  • display: grid; → mengaktifkan Grid
  • Anak langsung = grid items
  • Grid bekerja dalam sistem baris dan kolom
  • Cocok untuk layout kompleks

Sekarang, semua elemen di dalam .container akan disusun dalam grid, sesuai dengan pengaturan yang kita tentukan.

Properti Grid untuk Grid Container

1. grid-template-columns

Properti grid-template-columns digunakan untuk menentukan jumlah dan lebar kolom grid.

Contoh HTML Lengkap: grid-template-columns

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  background-color: #f1f5f9;
  padding: 10px;
}

.item {
  background-color: #82CAFF;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}
Penjelasan grid-template-columns

grid-template-columns: 1fr 1fr 1fr;
Artinya:

  • Membuat 3 kolom
  • Masing-masing memiliki lebar yang sama
  • fr = fraction (bagian dari ruang yang tersedia)

gap: 10px;
Memberi jarak antar grid item tanpa perlu margin.

Di sini, kita membuat tiga kolom dengan lebar yang sama. 1fr berarti satu bagian dari ruang yang tersedia.

2. grid-template-rows

Properti grid-template-rows digunakan untuk menentukan jumlah dan tinggi baris grid.

Penjelasan Nilai

  • px → tinggi tetap
  • auto → menyesuaikan isi konten
  • fr → membagi ruang kosong secara proporsional
  • minmax() → menentukan tinggi minimum dan maksimum

Contoh HTML Lengkap: grid-template-rows

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px auto;
  gap: 10px;
  height: 300px;
  background-color: #f1f5f9;
  padding: 10px;
}

.item {
  background-color: #82CAFF;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}
Ringkasan grid-template-rows
  • grid-template-rows mengatur tinggi baris
  • Bisa pakai px, auto, fr, minmax()
  • Sangat berguna untuk layout seperti:
    • Header
    • Content
    • Footer

Di sini, baris pertama akan memiliki tinggi 100px, dan baris kedua akan menyesuaikan secara otomatis dengan konten di dalamnya.

3. grid-gap

Properti grid-gap digunakan untuk menentukan jarak antara elemen-elemen grid.

Catatan Penting

Sekarang properti grid-gap sudah digantikan dengan gap (lebih modern dan bisa dipakai juga di Flexbox).

Jadi sebaiknya gunakan:

.container {gap: 20px;}

Fungsi sama, lebih direkomendasikan

Mengatur Baris & Kolom Secara Terpisah

Kita bisa mengatur jarak baris dan kolom secara berbeda:

.container {
  row-gap: 10px;
  column-gap: 30px;
}

Atau versi singkat:

.container {gap: 10px 30px;}

10px = jarak antar baris
30px = jarak antar kolom

Contoh HTML lengkap: grid-gap

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

.item {
  background-color: #82CAFF;
  color: white;
  padding: 30px;
  text-align: center;
  border-radius: 10px;
}

Apa Bedanya Dengan Margin?

  • margin → jarak luar tiap elemen
  • gap → jarak khusus antar grid items
  • gap lebih rapi dan tidak menyebabkan masalah spacing di pinggir container
Ringkasan grid-gap
  • grid-gap = versi lama
  • gap = versi modern (disarankan)
  • Bisa atur jarak baris dan kolom terpisah
  • Lebih bersih dibanding pakai margin

4. grid-template-areas

Properti grid-template-areas memungkinkan kita memberikan nama pada area dalam grid untuk mengontrol penempatan item secara lebih intuitif. 


.container {
  grid-template-areas: 
    "header header header"
    "main main sidebar"
    "footer footer footer";
}

Artinya kita membuat layout dengan 3 baris:

  1. Baris pertama → header penuh 3 kolom
  2. Baris kedua → main 2 kolom + sidebar 1 kolom
  3. Baris ketiga → footer penuh 3 kolom

Contoh HTML Lengkap: grid-template-areas

<!DOCTYPE html>
<html>
<head>
  <title>Contoh grid-template-areas</title>
</head>
<body>

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

</body>
</html>
Ringkasan grid-template-areas
  • grid-template-areas = memberi nama layout
  • grid-area = memasang elemen ke area
  • Bisa membuat layout profesional dengan kode yang rapi

Dengan cara ini, kita dapat menempatkan elemen-elemen dalam grid menggunakan nama area.

Properti Grid untuk Grid Items

1. grid-column

.item {grid-column: 1 / 3;}
Properti grid-column digunakan untuk menentukan posisi horizontal item dalam grid.

Artinya:

  • Item mulai dari garis kolom 1
  • Berakhir di garis kolom 3
  • Jadi item akan melebar 2 kolom

Contoh HTML Lengkap: grid-column

<!DOCTYPE html>
<html>
<head>
  <title>Contoh grid-column</title>
</head>
<body>

  <div class="container">
    <div class="item item1">Item 1 (Span 2 Kolom)</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>

</body>
</html>
Ringkasan grid-column
  • grid-column mengatur posisi horizontal
  • Menggunakan nomor garis grid
  • Bisa pakai 1 / 3 atau span 2
  • Cocok untuk layout kompleks (card besar, banner, dll)

Di sini, elemen akan menempati kolom pertama dan kedua.

2. grid-row

Properti grid-row digunakan untuk menentukan posisi vertikal item dalam grid. 

.item {grid-row: 1 / 2;}
Artinya:

  • Item mulai dari garis baris 1
  • Berakhir di garis baris 2
  • Jadi item menempati 1 baris

Contoh HTML Lengkap: grid-row

<!DOCTYPE html>
<html>
<head>
  <title>Contoh grid-row</title>
</head>
<body>

  <div class="container">
    <div class="item item1">Item 1 (Span 2 Baris)</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>

</body>
</html>
Ringkasan grid-row
  • grid-row mengatur posisi vertikal
  • Menggunakan nomor garis (line)
  • Bisa pakai 1 / 3 atau span 2
  • Sangat berguna untuk layout kompleks

Di sini, elemen akan menempati baris pertama dan kedua.

3. grid-area

Properti grid-area digunakan untuk menempatkan item di area yang telah kita tentukan sebelumnya dengan grid-template-areas. 

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

Artinya:

  • Kolom 1 → 1 bagian
  • Kolom 2 → 1 bagian
  • Kolom 3 → 2 bagian

Total rasio = 1 : 1 : 2
Kolom ke-3 akan dua kali lebih lebar dari kolom 1 dan 2.


+-------------------------------------+
|               HEADER                |
+----------+--------------------------+
| SIDEBAR  |        MAIN CONTENT      |
|          |                          |
+-------------------------------------+
|               FOOTER                |
+-------------------------------------+

Contoh HTML Lengkap: grid-area

<!DOCTYPE html>
<html>
<head>
  <title>Contoh grid-area</title>
</head>
<body>

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

</body>
</html>

Dengan properti ini, kita bisa menempatkan item di area tertentu yang telah kita beri nama.

Contoh Layout CSS Grid: Halaman Blog

Berikut adalah contoh penggunaan CSS Grid untuk membuat layout halaman blog dengan header, sidebar, dan konten utama:

Contoh Layout Blog (Grid Areas)
Struktur:

  • Header
  • Hero / Featured
  • 3 Artikel
  • Sidebar
  • Footer

Contoh HTML Lengkap: Halaman Blog (Grid Areas)

<!DOCTYPE html>
<html>
<head>
  <title>Layout Blog Grid area</title>
</head>
<body>

  <div class="container">
    <div class="header">Header</div>
    <div class="hero">Featured / Hero Section</div>

    <div class="content">
      <div class="article">Artikel 1</div>
      <div class="article">Artikel 2</div>
      <div class="article">Artikel 3</div>
    </div>

    <div class="sidebar">Sidebar</div>
    <div class="footer">Footer</div>
  </div>

</body>
</html>

Penjelasan singkat Layout CSS Grid: Halaman Blog

Baris 1 "header header"
Header penuh 2 kolom

Baris 2 "hero hero"
Hero full width

Baris 3 "content sidebar"
Konten utama di kiri (2fr)
Sidebar di kanan (1fr)

Baris 4 "footer footer"
Footer penuh

Kesalahan Umum dengan Grid Layout

  • Memulai dengan layout yang terlalu kompleks tanpa memahami dasar grid
  • Melupakan penggunaan grid-gap untuk jarak antar elemen
  • Terlalu banyak menggunakan grid-template-areas tanpa desain yang konsisten

Ringkasan CSS Part 6

  • CSS Grid adalah sistem layout dua dimensi yang memungkinkan kontrol penuh terhadap baris dan kolom
  • Gunakan grid-template-columns, grid-template-rows, dan grid-template-areas untuk membuat layout yang fleksibel dan responsif
  • Penggunaan grid-column dan grid-row untuk menata posisi elemen di dalam grid

Lanjutan Materi

Di CSS Part 7, kita akan membahas:

  • Responsive Design dan penggunaan media queries
  • Bagaimana memastikan layout bekerja dengan baik di perangkat apapun

Lanjut ke: Belajar CSS Part 7

Leave a Comment

Responsive — 100%