Layout web yang berantakan sering muncul karena struktur HTML dan CSS tidak direncanakan sejak awal. Tips layout web untuk pemula berikut fokus pada langkah praktis: menyusun kerangka, memilih teknik CSS yang tepat, dan menguji hasilnya di berbagai lebar layar. Semua contoh bisa langsung kamu coba di editor.
1. Tulis struktur HTML sebelum menyentuh CSS
Buka editor, buat file index.html, lalu susun elemen semantik: header, nav, main, aside, dan footer. Struktur ini menjadi peta layout. Kalau kamu langsung menata dengan CSS tanpa kerangka yang jelas, kamu akan menambahkan div pembungkus secara acak dan kesulitan melacak elemen mana yang mengatur apa.
Contoh kerangka halaman artikel:
<body>
<header>...</header>
<nav>...</nav>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
</body>Beri nama kelas yang menggambarkan peran, misalnya .site-header atau .post-list. Nama yang deskriptif memudahkanmu mencari elemen saat layout mulai kompleks.
2. Tentukan lebar konten dan ruang kosong lebih dulu
Sebelum mengatur warna atau font, tetapkan lebar maksimum konten. Halaman yang terlalu lebar melelahkan mata; teks yang terlalu sempit memaksa pembaca menggulir cepat. Atur pembungkus utama dengan max-width dan margin otomatis:
.container {
max-width: 72rem;
margin-inline: auto;
padding-inline: 1rem;
}Nilai 72rem setara sekitar 1150 piksel pada ukuran font default, cukup untuk dua kolom tanpa membuat baris teks terlalu panjang. Gunakan padding-inline agar konten tidak menempel ke tepi layar ponsel.
3. Pilih Flexbox atau Grid sesuai bentuk layout
Flexbox mengatur elemen dalam satu sumbu, misalnya baris navigasi atau tumpukan kartu vertikal. CSS Grid mengatur baris dan kolom sekaligus, cocok untuk halaman dengan area konten dan sidebar yang saling terkait. Salah memilih membuat CSS penuh trik margin negatif.
Untuk memantapkan pilihan, baca perbandingan CSS Grid vs Flexbox untuk layout satu dimensi. Jika layout-mu punya dua dimensi, misalnya header, sidebar, konten, dan footer yang menempati area berbeda, gunakan Grid. Untuk komponen kecil seperti tombol dan menu, Flexbox lebih ringkas.
- Gunakan Flexbox untuk nav horizontal, deretan kartu, dan perataan ikon dengan teks.
- Gunakan Grid untuk tata letak halaman utama, galeri, dan form multi-kolom.
- Jangan memaksakan satu teknik untuk semua bagian halaman.
4. Mulai dari mobile, lalu tambahkan breakpoint
Tulis CSS dasar untuk layar sempit tanpa media query. Susun elemen secara vertikal: header, konten, sidebar, footer. Setelah tampilan ponsel rapi, tambahkan @media (min-width: 48rem) untuk layar lebar dan ubah susunan menjadi dua kolom.
.layout {
display: grid;
gap: 1.5rem;
}
@media (min-width: 48rem) {
.layout {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
}Pendekatan mobile-first memaksa kamu memprioritaskan konten. Kamu juga terhindar dari menimpa banyak aturan CSS hanya untuk menyesuaikan layar kecil. Uji setiap breakpoint di browser dengan mengubah lebar jendela, bukan hanya mengandalkan mode perangkat di DevTools.
5. Gunakan unit relatif dan hindari tinggi tetap
Layout yang kaku biasanya memakai px untuk semua ukuran dan height tetap pada kontainer. Ganti dengan rem untuk ukuran font dan padding, serta biarkan tinggi elemen mengikuti isinya. Untuk gambar, atur max-width: 100% dan height: auto agar tidak meluber.
Kalau kamu butuh elemen yang mengikuti scroll, misalnya daftar kategori di samping artikel, terapkan sidebar sticky dengan CSS position: sticky. Pastikan induk elemen tidak memakai overflow: hidden karena properti itu mematikan perilaku sticky.
6. Periksa overflow dan tumpang tindih elemen
Masalah layout yang sering terlewat adalah elemen yang meluber keluar kontainer. Penyebab umumnya teks panjang tanpa spasi, gambar berukuran besar, atau min-width bawaan pada item Grid. Tambahkan min-width: 0 pada item Grid yang berisi teks atau kode agar bisa menyusut.
.grid-item {
min-width: 0;
overflow-wrap: anywhere;
}Buka DevTools, pilih elemen, dan periksa apakah kotak biru konten melewati batas induk. Gulir horizontal pada halaman adalah tanda pasti ada elemen yang terlalu lebar. Perbaiki satu per satu dari elemen terdalam.
7. Uji dengan data nyata dan keyboard
Isi halaman dengan teks sepanjang mungkin, judul panjang, dan gambar berbagai rasio. Layout yang terlihat rapi dengan lorem ipsum bisa rusak saat diisi konten asli. Uji juga navigasi keyboard: tekan Tab dan pastikan urutan fokus masuk akal serta elemen yang dapat diklik terlihat jelas.
Untuk halaman dengan banyak kartu, pertimbangkan masonry layout dengan CSS Grid dan JavaScript agar tinggi kartu yang berbeda tetap tersusun rapi. Namun, terapkan pola sederhana lebih dulu; masonry menambah kompleksitas yang belum tentu dibutuhkan.
Ringkasan
Layout web yang stabil dimulai dari struktur HTML yang jelas, lebar konten yang ditentukan, dan pemilihan Flexbox atau Grid sesuai bentuk. Mulai dari tampilan mobile, gunakan unit relatif, periksa overflow, lalu uji dengan konten nyata. Tujuh langkah ini bisa kamu ulangi untuk setiap halaman baru.
Pertanyaan yang Sering Diajukan
Apakah harus menguasai Flexbox sebelum belajar CSS Grid?
Tidak wajib, tetapi memahami Flexbox memudahkan pengaturan komponen kecil. Keduanya bisa dipelajari bergantian sambil membangun halaman sederhana.
Berapa breakpoint yang ideal untuk pemula?
Cukup satu atau dua breakpoint utama, misalnya 48rem dan 64rem. Tambahkan breakpoint hanya jika ada masalah tampilan yang benar-benar muncul pada lebar tertentu.
Mengapa layout saya berubah saat teks diperbesar?
Kemungkinan ada tinggi tetap atau ukuran font dalam piksel. Ganti ke rem dan biarkan tinggi elemen menyesuaikan isi agar layout tetap terbaca saat pengaturan font browser diperbesar.
