Tata Letak Fluida

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 63 dari 76.

Dalam desain web responsif, tata letak fluid menyesuaikan diri dengan berbagai ukuran layar menggunakan grid fleksibel dan satuan relatif seperti persentase, bukan nilai piksel tetap. Ini membantu tata letak melebar atau menyusut agar sesuai dengan layar apa pun, sehingga pengalaman pengguna tetap lancar di semua perangkat.

Prinsip utama tata letak fluid meliputi:

Satuan relatif: Menggunakan persentase (%), satuan viewport (vw, vh), atau em (em) alih-alih piksel tetap (px) untuk lebar, tinggi, margin, dan padding.

Grid fleksibel: Menggunakan CSS Grid atau Flexbox untuk membuat tata letak berbasis grid yang dapat menyesuaikan diri dengan berbagai ukuran layar.

Lebar maksimum dan lebar minimum: Mengatur lebar maksimum dan minimum elemen agar tidak menjadi terlalu lebar atau terlalu sempit pada ukuran layar yang ekstrem.

Berikut contoh tata letak fluid dasar yang menggunakan persentase:

.container {
    width: 90%; /* Container mengisi 90% lebar viewport */
    max-width: 1200px; /* Lebar container tidak akan melebihi 1200px */
}
.sidebar {
    width: 30%; /* Sidebar mengisi 30% lebar container */
    float: left;
}
.main-content {
    width: 70%; /* Area konten utama mengisi 70% lebar container */
    float: left;
}

Dalam contoh ini, elemen .container memiliki lebar fleksibel sebesar 90%, yang berarti lebarnya akan selalu mencakup 90% dari lebar viewport. Property max-width diatur ke 1200px agar container tidak menjadi terlalu lebar pada layar besar.

Elemen .sidebar dan .main-content memiliki lebar fleksibel sebesar 30% dan 70%, secara berurutan, sehingga keduanya dapat menyesuaikan dengan lebar container.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan elemen pembagian induk (<div>) yang berisi dua elemen pembagian anak (<div>) dengan class sidebar dan main. Tugasmu adalah membuat tata letak fluid menggunakan persentase. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class container. Atur property width-nya menjadi 80% dan margin menjadi 0 auto. Tambahkan border sebesar 1px solid black untuk visualisasi.
Tulis aturan CSS yang menargetkan elemen <div> dengan class sidebar. Atur property width-nya menjadi 25% dan buat elemen tersebut mengapung ke kiri.
Tulis aturan CSS yang menargetkan elemen <div> dengan class main. Atur property width-nya menjadi 75% dan buat elemen tersebut mengapung ke kanan.

Coba sendiri

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>