CSS - Grid Layout: Panduan untuk Pemula

Halo teman-teman, sang superstar desain web masa depan! Hari ini, kita akan memulai perjalanan yang menarik ke dunia CSS Grid Layout. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah-langkah ini secara bertahap. Pada akhir tutorial ini, Anda akan dapat membuat tata letak yang ramping dan responsif seperti seorang pro!

Apa Itu Grid Layout?

Bayangkan Anda menata furnitur di dalam sebuah ruangan. Anda mungkin akan secara mental membagi ruang tersebut menjadi baris dan kolom untuk membantu mengatur segala sesuatu secara rapi. Itu sebenarnya apa yang dilakukan CSS Grid Layout untuk halaman web!

CSS Grid Layout adalah alat yang kuat yang memungkinkan kita membuat tata letak dua dimensi di halaman web. Itu seperti memiliki grid tak terlihat di halaman web Anda tempat Anda dapat menempatkan konten tepat di tempat yang Anda inginkan. Keren, kan?

Elemen Grid

Sebelum kita masuk ke dalam, mari kenal dulu beberapa istilah penting:

1. Grid Container: Ini adalah elemen induk yang menahan semua item grid.
2. Grid Items: Ini adalah anak-anak dari grid container.
3. Grid Lines: Garis pemisah yang membentuk struktur grid.
4. Grid Tracks: Ruang antara garis grid (baris atau kolom).
5. Grid Cell: Pernikahan antara baris dan kolom.
6. Grid Area: Ruang persegi panjang yang dikelilingi oleh empat garis grid.

Jangan khawatir jika ini terdengar membingungkan saat ini. Kita akan melihat mereka dalam aksi segera!

Properti Display Grid

Mari mulai dengan contoh yang sederhana. Katakanlah kita ingin membuat grid 3x3 dasar. Ini adalah cara kita melakukannya:

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

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}

Mariuraikan ini:

1. Kita mengatur display: grid; di kontainer untuk mengaktifkan Grid Layout.
2. grid-template-columns: auto auto auto; membuat tiga kolom dengan lebar yang sama.
3. Kita gayakan item grid untuk kepentingan penampilan.

Voila! Anda telah membuat tata letak grid pertama Anda. Bagaimana menariknya!

Grid Rows dan Columns

Sekarang, mari kita lebih spesifik dengan baris dan kolom kita. Kita dapat menentukan ukuran yang tepat:

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

Ini membuat grid dengan:

• Tiga kolom: 100px, 200px, dan 100px lebar
• Dua baris: 80px dan 200px tinggi

Anda juga dapat menggunakan unit yang berbeda seperti persen atau unit fr yang baru (bagian dari ruang yang tersedia):

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

Ini membuat tata letak yang mirip, tetapi kolom akan menyesuaikan ukurannya secara fluks berdasarkan ruang yang tersedia.

Grid Gap

kadang-kadang, Anda ingin ada ruang untuk bernapas antara item grid Anda. Itu adalah tempat grid-gap memasuki:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}

Ini menambahkan jarak 10px antara semua baris dan kolom. Anda juga dapat mengatur jarak baris dan kolom secara terpisah:

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 10px;
grid-column-gap: 20px;
}

CSS Grid Lines

Ingat garis grid yang kita bicarakan sebelumnya? Kita dapat menggunakan mereka untuk menempatkan item dengan tepat:

<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 300px 100px;
gap: 10px;
}

.item1 {
grid-column: 1 / span 4;
}

.item2 {
grid-row: 2 / span 2;
}

.item3 {
grid-column: 2 / span 2;
}

.item4 {
grid-column: 4;
grid-row: 2;
}

.item5 {
grid-column: 2 / span 3;
grid-row: 3;
}

Ini membuat tata letak yang kompleks dengan header yang melintasi keseluruhan lebar, menu samping, area konten utama, sidebar kanan, dan footer. Mainakan nilai ini untuk melihat bagaimana mereka mempengaruhi tata letak!

Referensi Properti CSS Grid

Berikut adalah tabel praktis dari beberapa properti CSS Grid yang umum:

Properti	Deskripsi
display: grid;	Menentukan kontainer grid
grid-template-columns	Menentukan jumlah dan ukuran kolom
grid-template-rows	Menentukan jumlah dan ukuran baris
grid-gap	Mengatur jarak antara item grid
grid-column-start	Menentukan di mana item grid dimulai
grid-column-end	Menentukan di mana item grid berakhir
grid-row-start	Menentukan di mana item grid dimulai
grid-row-end	Menentukan di mana item grid berakhir
grid-area	Menentukan ukuran dan lokasi item grid

Dan itu saja! Anda telah mengambil langkah pertama ke dunia yang menakjubkan CSS Grid Layout. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba tata letak dan properti yang berbeda. Sebelum Anda mengetahui, Anda akan dapat membuat tata letak yang kompleks, responsif dengan mudah.

Selamat coding, sang master grid masa depan!

Credits: Image by storyset