Era digital menuntut website yang tidak hanya menarik secara visual, tetapi juga responsif. Artinya, website harus dapat beradaptasi dengan berbagai ukuran layar, mulai dari desktop hingga smartphone. Salah satu cara terbaik untuk mencapai responsivitas adalah dengan menggunakan CSS Grid. Dalam panduan ini, kita akan membahas secara mendalam cara membuat layout website responsif dengan CSS Grid. Jadi, siapkan kopi Anda dan mari kita mulai!

Apa itu CSS Grid dan Mengapa Anda Harus Menggunakannya?

CSS Grid adalah sistem layout dua dimensi yang memungkinkan Anda untuk mengatur elemen-elemen HTML dalam baris dan kolom. Bayangkan sebuah spreadsheet, tetapi alih-alih angka, Anda mengatur konten website Anda. Dibandingkan dengan metode layout tradisional seperti float atau bahkan Flexbox, CSS Grid menawarkan kontrol yang lebih besar dan fleksibilitas yang lebih tinggi dalam mendesain layout yang kompleks dan responsif.

Keuntungan Menggunakan CSS Grid:

• Kontrol yang Lebih Baik: CSS Grid memberi Anda kontrol penuh atas posisi dan ukuran elemen-elemen Anda.
• Responsivitas yang Mudah: Membuat layout responsif menjadi lebih mudah dengan fitur-fitur seperti fr unit dan minmax() function.
• Layout yang Kompleks: Anda dapat membuat layout yang kompleks dengan mudah, bahkan layout yang sebelumnya sulit dicapai dengan metode lain.
• Kode yang Lebih Bersih: CSS Grid membantu Anda menulis kode yang lebih bersih dan terstruktur.

Memahami Dasar-Dasar CSS Grid

Sebelum kita menyelam lebih dalam ke cara membuat layout website responsif dengan CSS Grid, mari kita pahami beberapa konsep dasar terlebih dahulu.

• Grid Container: Elemen HTML yang menjadi wadah bagi grid. Anda mendeklarasikan elemen ini sebagai grid container dengan display: grid; atau display: inline-grid;.
• Grid Item: Elemen-elemen HTML di dalam grid container yang akan diatur oleh grid.
• Grid Line: Garis-garis horizontal dan vertikal yang membentuk struktur grid. Garis-garis ini diberi nomor, dimulai dari 1.
• Grid Track: Ruang antara dua grid line. Grid track bisa berupa baris (row) atau kolom (column).
• Grid Cell: Ruang yang dibentuk oleh perpotongan antara baris dan kolom.
• Grid Area: Area persegi panjang yang dibentuk oleh satu atau lebih grid cell.

Langkah-Langkah Membuat Layout Website Sederhana dengan CSS Grid

Sekarang, mari kita praktikkan cara membuat layout website responsif dengan CSS Grid yang sederhana. Kita akan membuat layout dengan header, navigation, main content, sidebar, dan footer.

1. Struktur HTML:

<div class="container">
 <header>Header</header>
 <nav>Navigation</nav>
 <main>Main Content</main>
 <aside>Sidebar</aside>
 <footer>Footer</footer>
</div>

2. CSS untuk Grid Container:

.container {
 display: grid;
 grid-template-columns: 1fr 250px;
 grid-template-rows: 100px auto 50px;
 grid-template-areas:
 "header header"
 "nav main"
 "nav aside"
 "footer footer";
 gap: 10px;
 width: 90%;
 margin: 0 auto;
}

Penjelasan Kode:

• display: grid; menjadikan elemen container sebagai grid container.
• grid-template-columns: 1fr 250px; mendefinisikan dua kolom: satu dengan lebar fleksibel (1fr) dan satu dengan lebar tetap 250px.
• grid-template-rows: 100px auto 50px; mendefinisikan tiga baris: satu dengan tinggi 100px, satu dengan tinggi otomatis (auto), dan satu dengan tinggi 50px.
• grid-template-areas mendefinisikan area-area grid dengan nama-nama yang sesuai dengan elemen HTML kita.
• gap: 10px; menambahkan jarak 10px antara grid item.
• width: 90%; mengatur lebar container menjadi 90% dari lebar parent-nya.
• margin: 0 auto; memusatkan container secara horizontal.

3. CSS untuk Grid Item:

header {
 grid-area: header;
 background-color: #eee;
 padding: 20px;
}

nav {
 grid-area: nav;
 background-color: #ddd;
 padding: 20px;
}

main {
 grid-area: main;
 background-color: #ccc;
 padding: 20px;
}

aside {
 grid-area: aside;
 background-color: #bbb;
 padding: 20px;
}

footer {
 grid-area: footer;
 background-color: #aaa;
 padding: 20px;
}

Penjelasan Kode:

• Setiap elemen (header, nav, main, aside, footer) diberi grid-area yang sesuai dengan nama yang didefinisikan di grid-template-areas.
• Warna latar belakang dan padding ditambahkan untuk visualisasi yang lebih baik.

Membuat Layout Responsif dengan Media Queries

Langkah selanjutnya dalam cara membuat layout website responsif dengan CSS Grid adalah menggunakan media queries. Media queries memungkinkan kita untuk menerapkan style yang berbeda berdasarkan ukuran layar.

Contoh Media Query:

@media (max-width: 768px) {
 .container {
 grid-template-columns: 1fr;
 grid-template-rows: 100px 50px auto 200px 50px;
 grid-template-areas:
 "header"
 "nav"
 "main"
 "aside"
 "footer";
 }
}

Penjelasan Kode:

• @media (max-width: 768px) berarti style di dalam blok ini hanya akan diterapkan jika lebar layar kurang dari atau sama dengan 768px (ukuran layar tablet umumnya).
• Di dalam media query, kita mengubah grid-template-columns menjadi hanya satu kolom (1fr). Ini berarti semua elemen akan ditumpuk secara vertikal.
• Kita juga mengubah grid-template-rows dan grid-template-areas untuk menyesuaikan dengan layout baru.

Menggunakan fr Unit untuk Fleksibilitas

fr unit adalah singkatan dari