Series Mahir CSS #13 : CSS Grid – Layout yang Lebih Terstruktur

Hai teman-teman! Kali ini kita akan membahas salah satu fitur layout yang lebih powerful dan fleksibel dibandingkan Flexbox, yaitu CSS Grid! Jika Flexbox cocok untuk tata letak satu dimensi (satu baris atau satu kolom), maka CSS Grid memungkinkan kamu membuat tata letak dua dimensi (baris dan kolom) dengan lebih mudah dan lebih terstruktur. Yuk, kita pelajari cara menggunakan CSS Grid untuk membuat layout yang lebih kompleks!

Apa Itu CSS Grid?

CSS Grid Layout adalah sistem layout berbasis grid yang memungkinkan kamu untuk membuat desain yang lebih terstruktur dan kompleks dengan sangat mudah. Kamu bisa mengatur elemen di dalam kontainer secara vertikal dan horizontal, sekaligus memberikan kontrol penuh terhadap ukuran, posisi, dan jarak antar elemen.

Dengan CSS Grid, kamu bisa membagi kontainer menjadi kolom dan baris, lalu menempatkan elemen-elemen di dalamnya sesuai dengan kebutuhan.

Properti Dasar CSS Grid

1. display: grid;

Untuk mengaktifkan CSS Grid pada kontainer, kamu perlu menambahkan properti display: grid;. Setelah ini diterapkan, elemen-elemen di dalamnya akan menjadi grid items yang bisa kamu atur posisinya.

Contoh:

.container { 
            display: grid; 
}

2. grid-template-columns

Properti ini digunakan untuk mendefinisikan jumlah dan ukuran kolom di dalam grid. Kamu bisa menggunakan unit seperti piksel (px), persen (%), atau unit fleksibel (fr).

Contoh:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Membuat 3 kolom dengan ukuran yang sama */
}

Atau jika kamu ingin mendefinisikan kolom dengan ukuran yang berbeda:

.container {
    display: grid;
    grid-template-columns: 200px 1fr 2fr; /* Kolom pertama 200px, kolom kedua fleksibel, kolom ketiga 2x lebih lebar */
}

3. grid-template-rows

Seperti halnya kolom, kamu juga bisa mendefinisikan ukuran dan jumlah baris menggunakan properti grid-template-rows.

Contoh:

.container {
    display: grid;
    grid-template-rows: 100px 200px; /* Baris pertama 100px, baris kedua 200px */
}

4. grid-gap

Properti ini digunakan untuk mengatur jarak antar kolom dan baris di dalam grid. Kamu bisa mengatur jarak vertikal dan horizontal sekaligus.

Contoh:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px;
    grid-gap: 10px; /* Jarak antar elemen */
}

Menempatkan Elemen di Dalam Grid

Setelah kamu mendefinisikan grid, saatnya menempatkan elemen-elemen di dalam grid container.

5. grid-column

Properti ini digunakan untuk mengatur posisi dan span elemen dalam kolom. Kamu bisa menentukan elemen untuk mulai di kolom tertentu dan span ke beberapa kolom.

Contoh:

.item {
    grid-column: 2 / 4; /* Elemen ini akan mulai di kolom kedua dan span ke kolom ke-4 */
}

6. grid-row

Sama seperti grid-column, properti ini digunakan untuk menentukan posisi dan span elemen dalam baris.

Contoh:

.item {
    grid-row: 1 / 3; /* Elemen ini akan mulai di baris pertama dan span ke baris ketiga */
}

7. grid-area

Properti ini adalah shorthand untuk grid-row dan grid-column. Dengan menggunakan grid-area, kamu bisa menentukan posisi elemen dalam grid dengan lebih mudah.

Contoh:

.item {
    grid-area: 1 / 2 / 3 / 4; /* Mulai di baris 1, kolom 2, berakhir di baris 3, kolom 4 */
}

Membuat Layout Grid yang Responsif

Salah satu kelebihan besar CSS Grid adalah kemampuannya untuk membuat layout responsif. Dengan menggunakan media queries, kamu bisa mengubah tata letak grid sesuai dengan ukuran layar.

Contoh:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 3 kolom di layar besar */
    grid-gap: 10px;
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr 1fr; /* 2 kolom di layar kecil */
    }
}

@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr; /* 1 kolom di layar sangat kecil */
    }
}

Dengan pengaturan ini, layout kamu akan menyesuaikan dengan baik di berbagai ukuran layar. Elemen-elemen grid akan disusun secara otomatis mengikuti aturan grid yang telah kamu tentukan.

Menyusun Grid dengan Auto-Fill dan Auto-Fit

Kadang, kamu mungkin ingin grid kolom otomatis menyesuaikan jumlah kolom berdasarkan ukuran kontainer. Di sinilah properti auto-fill dan auto-fit berperan!

auto-fill

auto-fill akan mengisi ruang yang tersedia dengan sebanyak mungkin kolom.

Contoh:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
}

auto-fit

auto-fit bekerja mirip dengan auto-fill, tetapi jika ada ruang kosong, elemen-elemen grid akan memanfaatkan ruang tersebut.

Contoh:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 10px;
}

Kesimpulan

CSS Grid adalah alat yang sangat kuat untuk membuat layout dua dimensi yang kompleks. Dengan Flexbox dan Grid, kamu memiliki kontrol penuh atas tata letak elemen dalam halaman web, dan keduanya bisa digunakan secara bersamaan untuk mendapatkan hasil terbaik. Jika kamu sudah memahami cara kerja Grid, kamu akan bisa membuat layout yang lebih rapi, responsif, dan lebih mudah dipelihara.

Sekianlah belajar CSS tentang Grid. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Jangan lupa untuk terus bereksperimen dengan CSS Grid, ya! ?