Layout web yang rapi dimulai dari struktur HTML yang benar, lalu diatur dengan CSS Grid untuk kerangka halaman dan Flexbox untuk isi di dalamnya. Panduan ini membahas tujuh langkah yang bisa kamu ikuti langsung saat membangun halaman baru. Setiap langkah disertai contoh kode yang bisa disalin ke proyekmu.
1. Tentukan Struktur HTML Dasar
Sebelum menyentuh CSS, tulis kerangka halaman dengan elemen semantik. Struktur yang jelas memudahkan penentuan area mana yang akan diatur Grid dan mana yang cukup Flexbox. Contohnya, header, navigasi, konten utama, sidebar, dan footer.
<body>
<header class="site-header">...</header>
<nav class="site-nav">...</nav>
<main class="content">...</main>
<aside class="sidebar">...</aside>
<footer class="site-footer">...</footer>
</body>Gunakan header, nav, main, aside, dan footer agar struktur mudah dibaca oleh browser maupun developer lain. Jika kamu baru menambahkan stylesheet atau script, pastikan urutan pemuatannya benar seperti dijelaskan di panduan menambahkan script ke HTML.
2. Terapkan CSS Grid pada Wadah Utama
Grid cocok untuk membagi halaman menjadi beberapa area. Aktifkan Grid pada body atau pembungkus utama, lalu tentukan kolom dan baris.
.layout {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"header header header"
"nav main sidebar"
"footer footer footer";
gap: 1rem;
}Dengan grid-template-areas, kamu bisa menempatkan setiap elemen ke area yang sesuai tanpa menghitung garis kolom. Cara ini lebih mudah dibaca daripada menulis grid-column: 1 / 2 berulang kali.
3. Tempatkan Setiap Elemen ke Area Grid
Setelah area terbentuk, hubungkan elemen HTML dengan nama area menggunakan properti grid-area.
.site-header { grid-area: header; }
.site-nav { grid-area: nav; }
.content { grid-area: main; }
.sidebar { grid-area: sidebar; }
.site-footer { grid-area: footer; }Langkah ini membuat posisi setiap bagian halaman menjadi eksplisit. Jika ada elemen yang tumpang tindih, periksa kembali nama area dan pastikan tidak ada dua elemen memakai nama yang sama.
4. Atur Isi dengan Flexbox
Grid mengatur kerangka besar, sedangkan Flexbox menangani isi di dalam setiap area. Misalnya, navigasi horizontal atau deretan kartu di dalam main.
.site-nav ul {
display: flex;
gap: 1rem;
list-style: none;
padding: 0;
}
.card-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 200px;
}Dengan flex-wrap: wrap, kartu akan turun ke baris baru saat ruang tidak cukup. Untuk layout kartu yang lebih kompleks, kamu bisa membandingkan pendekatannya di layout card responsif dengan CSS Grid.
5. Tambahkan Media Query untuk Layar Kecil
Layout tiga kolom tidak akan muat di layar ponsel. Gunakan media query untuk mengubah susunan Grid dan Flexbox pada lebar tertentu.
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"sidebar"
"footer";
}
.site-nav ul {
flex-direction: column;
}
}Uji perubahan pada beberapa lebar layar, bukan hanya satu titik. Pendekatan mobile-first sering lebih mudah: tulis style dasar untuk layar kecil, lalu tambahkan aturan untuk layar lebar dengan min-width. Jika kamu ingin memperdalam Flexbox untuk layout responsif, lihat panduan layout responsif dengan Flexbox.
6. Periksa dan Perbaiki Overlap
Overlap sering muncul saat elemen memiliki lebar tetap atau posisi absolut yang tidak diperhitungkan. Periksa properti width, min-width, dan position pada elemen yang bermasalah. Gunakan DevTools browser untuk melihat kotak elemen secara langsung.
Jika overlap tetap terjadi, baca cara menangani overlap layout CSS tanpa trial and error untuk langkah diagnosis yang lebih sistematis. Sering kali masalahnya bukan pada Grid atau Flexbox, melainkan pada margin negatif atau elemen anak yang meluber.
7. Uji di Berbagai Perangkat dan Jaringan
Layout yang baik harus tetap terbaca saat koneksi lambat atau perangkat beragam. Uji halaman di beberapa browser dan ukuran layar. Untuk memeriksa koneksi dan memastikan aset dimuat dengan benar, kamu bisa menggunakan alat seperti uji ping stabil untuk diagnosa jaringan yang membantu melihat apakah masalahnya di server atau di layout.
Pertimbangkan juga privasi pengunjung saat menambahkan analitik atau pelacak aktivitas. Bandingkan pilihan yang ada di perbandingan aplikasi pelacak aktivitas untuk privasi agar data pengunjung tetap terkendali.
Untuk hiburan di sela debugging, terutama jika kamu penggemar basket, sepakbola, atau UFC, kamu bisa menonton bareng gratis dengan host kocak di tarkamlive. Siapa tahu jadi cara melepas penat setelah layout akhirnya rapi.
Ringkasan
Tujuh langkah di atas membentuk alur kerja yang jelas: susun HTML, bentuk kerangka dengan Grid, atur isi dengan Flexbox, lalu sesuaikan untuk layar kecil. Setelah terbiasa, kamu bisa memilih Grid atau Flexbox sesuai kebutuhan tanpa menebak-nebak. Simpan contoh kode di atas sebagai titik awal proyek berikutnya.
Pertanyaan yang Sering Diajukan
Apakah harus selalu memakai Grid dan Flexbox bersamaan?
Tidak. Gunakan Grid jika kamu perlu mengatur baris dan kolom sekaligus, dan Flexbox jika cukup satu arah. Kombinasi keduanya masuk akal untuk halaman dengan kerangka besar dan isi yang beragam.
Bagaimana cara mengetahui layout sudah responsif?
Ubah lebar jendela browser secara perlahan dan perhatikan apakah ada elemen yang terpotong atau bertumpuk. Uji juga di perangkat nyata jika memungkinkan, karena perilaku sentuh dan ukuran font bisa berbeda.
Apakah Grid bisa menggantikan media query?
Grid dengan auto-fit dan minmax bisa menyesuaikan jumlah kolom secara otomatis, tetapi media query tetap berguna untuk mengubah susunan area atau ukuran font pada titik tertentu.
