Tampilan yang responsif dan dinamis menjadi kunci keberhasilan sebuah website. Di sinilah CSS grid berperan me-level up cara kita mendesain dan mengembangkan layout web.

Sebagai sistem layout dua dimensi, CSS grid menghadirkan pendekatan baru dalam mengatur elemen-elemen halaman, memberikan kontrol penuh kepada web developer untuk mengkustomisasi tampilan sesuai keinginan. Melalui kemampuan untuk mengatur baris dan kolom dengan presisi, CSS grid mengubah cara kita melihat dan membangun antarmuka web.

Di artikel ini, kita akan menyelami fitur-fitur menarik dari CSS grid. Yuk, simak!

Dasar-dasar CSS Grid

Sebelum mengetahui cara menggunakan CSS grid, berikut elemen-elemen penting yang perlu kamu ketahui:

• Baris (row) dan kolom (column): elemen ini menjadi struktur dasar dari CSS grid. Baris adalah elemen horizontal, sedangkan kolom adalah elemen vertikal. Keduanya bersama-sama membentuk kerangka kerja untuk meletakkan konten.
• Garis (line): garis adalah pembatas antara baris dan kolom. Dengan menentukan nomor garis, kamu bisa menempatkan item di area yang diinginkan.
• Sel (cell): sel adalah ruang antara garis vertikal dan horizontal. Elemen ini berguna sebagai tempat untuk meletakkan konten.
• Area: area adalah ruang yang dibentuk dari beberapa sel, memungkinkan kamu untuk mengelompokkan elemen.
• Gap: gap adalah jarak antara baris dan kolom, memberikan ruang antar elemen.
• Kontainer (container): container adalah elemen utama yang mengandung grid. Di sini, kamu akan mendefinisikan struktur grid.
• Item: item adalah elemen yang ditempatkan di dalam grid.

Cara Mengatur Grid Container

Langkah pertama dalam menggunakan CSS grid adalah membuat grid container. Kamu bisa melakukannya dengan menentukan elemen HTML yang akan dijadikan container.

Misalnya, kamu menggunakan elemen < div > sebagai container. Berikut contoh kode HTML-nya:

Setelah membuat grid container di HTML, atur properti CSS untuk mengorganisasi container tersebut. Berikut beberapa properti CSS yang bisa kamu gunakan:

• display: properti ini dipakai untuk mendefinisikan elemen sebagai grid container. Nilainya diatur menjadi grid atau inline-grid tergantung kebutuhan layout.

• grid-template-rows dan grid-template-columns: properti ini berfungsi untuk mendefinisikan ukuran baris dan kolom. Kamu bisa menentukan ukuran dalam satuan px, em, fr (fraksi), atau persentase.

• grid-gap: properti ini digunakan untuk menentukan jarak antara baris dan kolom. Nilainya bisa diatur dalam satuan px, em, atau persentase.

• grid-auto-rows dan grid-auto-columns: jika kamu tidak mendefinisikan semua baris atau kolom, properti ini bisa untuk menentukan ukuran baris atau kolom secara otomatis.

Cara Mengatur Grid Gap dan Grid Template

Grid gap adalah properti dalam CSS grid untuk mengatur jarak antara berbagai item grid. Dengan grid gap, kamu bisa menentukan jarak vertikal antar baris dan jarak horizontal antar kolom. Berikut contoh penggunaannya:

Kamu juga bisa mengatur jarak antar baris dan kolom secara terpisah dengan row-gap dan column-gap:

Selain grid gap, ada juga grid template untuk membuat layout yang lebih kompleks dengan CSS Grid. Dengan grid-template-rows dan grid-template-columns, kamu bisa mendefinisikan ukuran dan jumlah baris dan kolom.

Tak hanya itu, grid-template-areas memungkinkan kamu memberi nama pada area-area tertentu dan merencanakan layout dengan lebih mudah. Sebagai contoh, kita akan mendefinisikan beberapa area, yaitu header, sidebar, content, dan footer, lalu menempatkannya di posisi yang diinginkan dalam grid.

Cara Menyusun Grid secara Responsif

Responsivitas merupakan kunci untuk memastikan website bisa ditampilkan dengan baik di berbagai perangkat, seperti desktop, tablet, dan smartphone. Dengan CSS grid, kamu bisa membuat layout yang responsif, salah satunya menggunakan satuan fr (fraksi) untuk menentukan ukuran baris dan kolom.

Kamu juga bisa mengaplikasikan style berbeda berdasarkan karakteristik perangkat, seperti lebar viewport menggunakan media queries. Mengkombinasikan CSS grid dan media queries, membantu kamu mengubah struktur grid untuk menyesuaikan tampilan pada perangkat yang berbeda.

Pada kode di atas, style dasar yang didefinisikan di luar media query (font-size: 16px;) akan diterapkan untuk semua tipe media. Media query @media all and (min-width: 600px) menargetkan semua tipe media dengan lebar viewport di atas 600px. Jadi, pada perangkat dengan lebar viewport lebih dari 600px, ukuran font akan ditingkatkan menjadi 18px.

FAQ (Frequently Asked Question)

Apa perbedaan antara CSS Grid dan Flexbox?

CSS grid dan Flexbox adalah teknologi layout CSS yang berbeda. Jika CSS grid dapat digunakan untuk layout dua dimensi (baris dan kolom), Flexbox lebih cocok untuk layout satu dimensi (hanya baris atau hanya kolom) saja.

Apa itu grid line dan bagaimana cara menggunakannya?

Grid line adalah garis pembatas antara baris dan kolom dalam grid. Kamu bisa menggunakan nomor grid line untuk menempatkan item grid di posisi yang diinginkan. Misalnya, grid-column: 1 / 3; akan menempatkan item grid mulai dari grid line 1 sampai sebelum grid line 3.

Apakah semua browser dapat menggunakan grid?

Semua browser modern dapat menggunakan grid. Namun, browser seperti Opera Mini dan browser lama IE9 tidak mendukung. Jika grid digunakan di browser tersebut, layout yang di browser menjadi tidak beraturan.

Penutup

Sebagai penutup, CSS grid memberikan kebebasan dan fleksibilitas dalam merancang layout website. CSS grid menawarkan berbagai fitur untuk membuat tampilan yang inovatif dan adaptif, mulai dari pembuatan grid container, penyesuaian grid gap, penggunaan grid template, sampai penyusunan grid yang responsif.