Membuat Tata Letak dengan CSS

Mari kita kembali ke tujuan awal kita mempelajari konsep-konsep dasar Frontend Web Development : Membuat Aplikasi Web yang Keren.

Setiap aplikasi berbasis web yang sering teman-teman kunjungi pasti memiliki tampilan dan tata letak yang berbeda-beda. Namun sudah pasti, semuanya ditampilkan dengan baik dan menarik agar pengguna nyaman menggunakan aplikasi tersebut. Lantas bagaimana cara membuat tata letak seperti aplikasi tersebut? contohnya seperti aplikasi Tokopedia berikut.

Flexbox : Mulai dari Bagian Kecil

Mari kita mulai membuat sebuah tata letak dari hal yang paling kecil, yaitu dengan membuat bagian navigasi pada sebuah aplikasi web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu Navigasi Horizontal</title>
    <style>
        .menu {
            display: flex;
            justify-content: center;
            background-color: cyan;
            cursor: pointer;
        }
        
        .menu-item {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="menu-item">Beranda</div>
        <div class="menu-item">Tentang Kami</div>
        <div class="menu-item">Layanan</div>
        <div class="menu-item">Kontak</div>
    </div>
</body>
</html>

Jika kita tampilkan pada browser, halaman web kita akan menjadi seperti ini :

Yeayy! Kita sudah berhasil membuat komponen navigasi sederhana untuk sebuah aplikasi web. Tapi, apa sih yang sebenarnya kita lakukan pada kode di atas?

Coba teman-teman hapus semua bagian CSS pada kode tersebut, lalu lihat apa yang terjadi pada tampilan web kita.

Yup, setiap item navigasi yang kita buat sebenarnya hanyalah sebuah elemen <div>. Elemen div sifatnya akan memenuhi satu baris penuh pada sebuah halaman web (dari kanan ke kiri) walaupun kontennya hanya sedikit. Itulah mengapa elemen-elemen div tersebut berjejer ke bawah, bukan ke samping.

Karena kita kita ingin mengatur elemen tersebut berjejer ke samping, kita menambahkan properti display dengan nilai flex pada container (pembungkus dari semua elemen tersebut. Inilah kehebatan flexbox!

Flexbox (flexible box) cocok sekali digunakan untuk keperluan seperti contoh di atas. Di saat kita ingin menata tampilan dari beberapa elemen sejenis secara fleksibel dan mudah. Setelah elemen tersebut berjejer sesuai arah yang kita inginkan, kita dapat menambahkan beberapa properti lainnya. Contohnya pada kode di atas, kita membuat semua elemen tersebut berjejer tepat di tengah-tengah halaman secara horizontal dengan properti justify-content dan nilai center.

flex-direction: Mengatur arah tata letak (baris atau kolom).
justify-content: Mengatur perataan elemen dalam arah utama.
align-items: Mengatur perataan elemen dalam arah silang.
flex-wrap: Mengatur apakah elemen-elemen flex harus dibungkus ke baris atau kolom baru jika mereka tidak cukup muat dalam container Flexbox. Nilai umumnya adalah nowrap (elemen tidak dibungkus), wrap (elemen dibungkus jika tidak muat), dan wrap-reverse (elemen dibungkus secara terbalik jika tidak muat).
flex-grow: Mengatur sejauh mana elemen flex dapat tumbuh dalam container jika ada ruang ekstra dalam arah utama. Ini adalah nilai numerik yang menentukan rasio pertumbuhan relatif antara elemen-elemen flex.
flex-shrink: Mengatur sejauh mana elemen flex dapat menyusut dalam container jika tidak cukup ruang dalam arah utama. Ini juga adalah nilai numerik yang menentukan rasio penyusutan relatif antara elemen-elemen flex.

Cobalah menggunakan properti-properti di atas untuk lebih dapat memahami penggunaan flexbox berdasarkan setiap perubahan yang terjadi.

Grid: Membuat Tata Letak Web Artikel

Jika teman-teman memerhatikan web artikel atau sejenisnya, pasti teman-teman mempertanyakan bagaimana membuat tata letak yang sangat rumit dan padat pada web tersebut. Kita bisa menggunakan Grid untuk membuat tampilan yang lebih kompleks, misalnya untuk membuat layout secara keseluruhan pada sebuah aplikasi web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Implementasi Grid dengan Tata Letak yang Berbeda</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* Tiga kolom */
            grid-gap: 20px;
        }

        .big-item {
            grid-column: span 2; /* Menempati dua kolom */
            background-color: #f0f0f0;
            padding: 10px;
        }

        .small-item {
            background-color: #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="big-item">
            <!-- Elemen dengan tata letak berbeda -->
            <h2>Artikel Besar</h2>
            <p>Ini adalah artikel dengan tata letak yang berbeda.</p>
        </div>
        <div class="small-item">
            <h2>Artikel Kecil 1</h2>
            <p>Ini adalah artikel kecil 1.</p>
        </div>
        <div class="small-item">
            <h2>Artikel Kecil 2</h2>
            <p>Ini adalah artikel kecil 2.</p>
        </div>
        <div class="small-item">
            <h2>Artikel Kecil 3</h2>
            <p>Ini adalah artikel kecil 3.</p>
        </div>
        <!-- Tambahkan lebih banyak elemen dengan tata letak berbeda jika diperlukan -->
    </div>
</body>
</html>

Pada kode di atas, kita memberikan nilai grid pada properti display untuk menggunakan fitur grid pada CSS ini. Kita dapat menggunakan grid dengan mudah berkat properti grid-template-columns yang dapat menentukan ada berapa kolom yang kita inginkan untuk mengatur tampilan web kita. Selain itu juga memberikan jatah masing-masing berapa besar bagian dari tiap kolom tersebut (fr artinya fraction, satuan yang menentukan berapa besar bagian pada sebuah kolom grid). Lalu kita memberikan properti grid-column dengan nilai span 2 pada bagian yang ingin kita tampilkan lebih besar dari bagian lainnya agar dia menempati dua kolom.

Cobalah memodifikasi nilai-nilai dari properti tersebut untuk lebih memahami penggunaan Grid berdasarkan perubahan yang terjadi.

Referensi

https://www.w3schools.com/css/css3_flexbox.asp https://www.w3schools.com/css/css_grid.asp

PreviousMerapikan Halaman Web dengan Memberi Jarak NextCSS Display dan CSS Position

Last updated 2 years ago

hashtagFlexbox : Mulai dari Bagian Kecil

hashtagGrid: Membuat Tata Letak Web Artikel

hashtagReferensi

Flexbox : Mulai dari Bagian Kecil

Grid: Membuat Tata Letak Web Artikel

Referensi