Panduan Grid System pada CSS

Grid system pada CSS adalah sebuah layout system yang memungkinkan kamu untuk mengatur elemen-elemen di dalam suatu halaman web dalam bentuk grid/bilah-bilah.

Saya sendiri sering membayangkan Grid system sebagai sebuah lemari yang memiliki ruang-ruang kosong yang siap untuk diisi oleh benda-benda lain.

Dengan grid system, kamu bisa membagi halaman menjadi baris dan kolom, sehingga lebih mudah untuk menyusun konten secara rapi dan responsif.

Grid system sangat berguna bagi developer yang ingin membuat desain yang konsisten dan terstruktur tanpa harus menggunakan banyak kode CSS tambahan.

CSS Grid Layout adalah modul yang diperkenalkan di CSS3, memberikan kemampuan untuk membuat layout web yang lebih kompleks dan fleksibel.

Berikut adalah beberapa konsep dasar dari CSS Grid:

Elemen yang berfungsi sebagai wadah dari grid items. Kamu dapat mengubah elemen menjadi grid container dengan menggunakan properti display: grid.

Jika dianalogikan menggunakan lemari diatas, grid container merupakan kerangka luar dari lemari tersebut.

Implementasinya pada CSS adalah sebagai berikut:

.grid-container {
    display: grid;
}

Grid items adalah elemen-elemen yang berada didalam grid container. Didalam grid items kamu bisa menaruh konten-kontenmu yang sebenarnya.

Jika dianalogikan pada lemari, Grid item adalah ruang-ruang kecil atau bilah-bilah pada lemari tersebut.

Garis pembatas yang memisahkan setiap kolom dan baris di dalam grid.

Baris dan kolom yang dibuat oleh grid lines.

Ruang antara dua baris dan dua kolom yang berpotongan.

Pertama, tentukan elemen yang akan menjadi grid container dan tambahkan properti display: grid.

<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>

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

.grid-item {
    background-color: #ccc;
    padding: 20px;
    text-align: center;
}

Dalam contoh di atas, kita membuat grid dengan dua kolom yang sama lebarnya dan celah antar elemen sebesar 10px. Berikut adalah hasilnya/tampilannya jika kita jalankan:

Gunakan properti grid-template-columns dan grid-template-rows untuk menentukan jumlah kolom dan baris.

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

Pada contoh ini, kita membuat tiga kolom dengan lebar masing-masing 1fr, 2fr, dan 1fr.

Satuan “fr” (fraction) dalam CSS adalah unit yang digunakan dalam CSS Grid Layout untuk mendefinisikan bagian proporsional dari ruang yang tersedia dalam grid container.

Ketika kamu menggunakan “fr”, kamu mengatakan kepada browser untuk membagi ruang yang tersedia dalam grid berdasarkan proporsi yang ditentukan.

Misalnya, jika kamu memiliki dua kolom dengan ukuran 1fr dan 2fr, kolom pertama akan mendapatkan sepertiga dari ruang yang tersedia, sementara kolom kedua akan mendapatkan dua pertiga.

Satuan ini sangat berguna untuk membuat layout yang fleksibel dan responsif, karena memungkinkan elemen grid untuk menyesuaikan ukuran mereka secara proporsional sesuai dengan ruang yang tersedia.

Mendefinisikan jumlah dan ukuran kolom dalam grid.

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

Mendefinisikan jumlah dan ukuran baris dalam grid.

grid-template-rows: 100px auto 100px;

Menentukan ukuran celah antara grid items.

gap: 10px;

Menentukan posisi dan rentang grid item dalam grid container. Contohnya

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

Kamu bisa mencoba menggunakan grid-column dan grid-row disini.

CSS Grid memberikan fleksibilitas dalam mendesain layout yang kompleks dan responsif.

Kamu memiliki kontrol penuh terhadap baris dan kolom, serta bagaimana elemen ditempatkan dalam grid.

Dengan CSS Grid, kamu dapat dengan mudah membuat layout yang responsif untuk berbagai ukuran layar.

Meskipun powerful, CSS Grid bisa menjadi cukup kompleks dan membingungkan untuk pemula.

Meskipun sebagian besar browser modern mendukung CSS Grid, beberapa versi lama mungkin tidak sepenuhnya kompatibel.

CSS Grid system adalah alat yang sangat powerful untuk membuat layout web yang kompleks dan responsif.

Dengan memahami dasar-dasar dan properti-properti penting dari CSS Grid, kamu dapat mengoptimalkan desain web dan meningkatkan pengalaman user.

Meskipun learning curve nya lebih terjal (membutuhkan waktu yang lebih banyak untuk mempelajarinya), manfaat yang diberikan oleh CSS Grid membuatnya layak untuk dipelajari dan diterapkan dalam proyek web kamu.

Selamat mencoba dan happy coding!