Ketika mengembangkan sebuah modern website, kita memerlukan teknik layouting dengan fitur-fitur yang disediakan oleh CSS yaitu Grid. Dengan menggunakan CSS Grid, dapat memudahkan kita dalam membuat layout pada website. Grid layout memberikan kontrol penuk untuk membuat desain web yang kompleks dan responsif dengan mudah. Pada artikel ini, kita akan membahas CSS Grid secara mendalam dan memahaminya dengan contoh praktis yang mudah dipahami bagi pemula.

Apa itu CSS Grid Layout?

CSS Grid Layout adalah sistem layout dua dimensi yang memungkinkan kita untuk mengatur elemen pada HTML dalam baris (rows) dan kolom (column) secara bersamaan. Berbeda dengan Flexbox yang bekerja satu dimensi, CSS Grid memberikan kontrol penuh terhadap kedua sumbu yaitu horizontal dan vertikal. Dengan layouting menggunakan Grid Layout memungkinkan kita untuk:

Membuat layout yang kompleks dengan mudah.
Membuat desain responsif tanpa media query yang rumit.
Mengatasi keterbatasan dari penggunaan float dan positioning pada CSS.

Konsep Dasar CSS Grid

Elemen container yang didefinisikan sebagai grid, perlu kita deklarasikan dengan properti display: grid;.

.grid_container {
 display: grid;
}

Dengan begitu, elemen container dengan class .grid_container terdefinisi sebagai Grid Container.

Properti Utama dalam CSS Grid

Beberapa properti utama yang penting setelah kita mendefiniskan Grid Container yaitu grid-template-columns, grid-template-rows, grid-area dan gap. Penjelasan fungsi dari kedua properti tersebut adalah sebagai berikut:

grid-template-columns mengatur jumlah dan ukuran kolom dalam grid container.
grid-template-rows mengatur jumlah dan ukuran baris dalam grid container.
grid-area menentukan posisi elemen dalam grid berdasarkan baris dan kolom.
gap mengatur jarak antar kolom dan baris. Berikut contoh layout sederhana dengan CSS Grid. Kode HTML

<!DOCTYPE>
<html>
	<head>
		<title>Learn CSS Grid - NganggurDev</title>
	 <link rel="stylesheet" href="styles.css"/>
	</head>
	<body>
	 <div class="grid-container">
			<div class="header">Header</div>
			<div class="sidebar">Sidebar</div>
			<div class="main">Main Content</div>
			<div class="footer">Footer</div>
		</div>
	</body>
</html>

Kode CSS

.grid-container {
  height: 100vh;
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
}

.header { 
  grid-area: header;
  background-color: aquamarine;
  padding: 10px;
  text-align: center; 
}
.sidebar { 
  grid-area: sidebar; 
  background-color: lightblue;
  padding: 10px;
  text-align: center;
}
.main { 
  grid-area: main;
  background-color: lightcoral;
  padding: 10px;
 }
.footer { 
  grid-area: footer;
  background-color: lightgreen;
  padding: 10px;
  text-align: center;
}

Dari contoh kode diatas, kita membuat struktur layout halaman dengan area yang diberi nama. Layout terbagi menjadi 3 baris utama yang terdiri dari header, content (sidebar & main), dan footer. Secara visual akan menjadi seperti gambar dibawah ini. CSS Grid Layout Preview

Satuan Pada grid-template

Dalam properti grid-template-columns dan grid-template-rows pada CSS Grid, kita dapat menggunakan berbagai jenis satuan ukuran untuk mengukur lebar kolom dan tinggi baris. Berikut adalah satuan umum yang sering digunakan beserta penjelasannya:

px satuan tetap, tidak akan berubah meskipun ukuran dari layar berubah.
% mengacu pada lebar atau tinggi elemen grid container.
fr satuan khusus dari CSS Grid yang membagi ruang tersisa secara proposional.
auto ukuran kolom atau baris akan disesuaikan secara otomatis berdasarkan konten.

CSS Grid vs Flexbox

Pada artikel sebelumnya kita telah belajar layouting menggunakan Flexbox Flexible Box Layout in CSS - Easy and Powerful Responsive Layout. Sekarang, kita perlu mengetahui kapan menggunakan Grid dan kapan menggunakan Flexbox.

Gunakan Grid ketika:

Membuat layout dua dimensi (baris dan kolom).
Perlu kontrol presisi terhadap posisi elemen.
Membuat layout halaman yang lebih kompleks.
Membuat desain yang responsif tanpa banyak menggunakan media query

Gunakan Flexbox ketika:

Membuat layout satu dimensi (baris atau kolom).
Membuat komponen
Perlu fleksibilitas dalam ukuran item.

Kesimpulan

CSS Grid merupakan solusi modern untuk menyusun layout halaman yang kompleks dan responsif. Dengan mempelajari CSS Grid kita bisa membangun struktur website yang lebih profesional.

Terimakasih, sampai jumpa di artikel selanjutnya.