KAPAN MENGGUNAKAN GRID DAN FLEXBOX PADA CSS?

CSS sebagai alat yang penting dalam mengatur layout halaman situs website. Dalam mengatur tata letak atau layout, terdapat dua properti, yakni CSS Grid dan Flexbox. Kedua properti ini sama-sama dapat membantu developer mengatur halaman website dengan rapi dan menarik, tapi, kapan harus menggunakan CSS Grid dan Flexbox? Simak artikel berikut ini!

Apa Itu CSS Grid?

Grid merupakan teknik layout dalam CSS yang dirancang untuk membuat tata letak dengan 2 dimensi (baris dan kolom). CSS Grid sangat membantu developer dalam membuat layout yang lebih kompleks dan untuk mengontrol penuh terhadap posisi atau tata letak elemen. Ini sangat membantu dalam membangun website yang responsif dan memiliki struktur yang rapi.

Apa Itu CSS Flexbox?

Flexbox (Flexibel Box) memiliki fungsi yang berbeda dengan Grid. Jika CSS Grid difungsikan untuk mengatur layout website dengan 2 dimensi, maka Flexbox kebalikannya yang hanya mengatur 1 dimensi saja. Seperti namanya Flexibel Box memiliki sifat yang fleksibel atau mudah menyesuaikan dengan hal apa yang ingin diubah dari elemen. Sifat ini sangat cocok saat ingin mengatur jarak antar elemen, menata elemen dalam satu arah atau membuat elemen dengan menyesuaikan ruangan yang tersedia. Flexbox bisa digunakan untuk website sederhana saja yang memiliki tata letak yang sederhana.

Lalu, kapan dan bagaimana cara menggunakan keduanya? Simak penjelasan berikut ini!

Waktu untuk Menggunakan CSS Grid

Gunakan CSS Grid saat kamu ingin: 1. Saat Akan Membuat Tata Letak Kompleks Kamu bisa menggunakan Grid ketika ingin membuat struktur layout seperti tabel atau tata letak elemen dengan area yang sudah memiliki posisi tetap, seperti header, footer, main content, dsbnya.

2. Mengatur Ukuran Elemen secara Spesifik Gunakan CSS Grid ketika kamu ingin membuat website yang desain-nya memerlukan lebih banyak area dan hanya perlu menentukan area secara spesifik, menulis grid-template-areas. CSS Grid juga membantu kamu dalam mengatur salah satu properti baris (rows) dan kolom (column), kamu bisa menulisnya seperti berikut, grid-column, grid-row, grid-template-columns, dan grid-template-rows.

3. Mengontrol Presisi Tinggi dan Lebar secara Kompleks CSS Grid mengontrol secara penuh dalam mengatur tinggi atau lebar elemen secara kompleks tanpa harus menggunakan padding atau margin, kamu bisa menuliskan properti gap, row-gap, dan column-gap.

Contoh penggunaan CSS Grid: Dalam CSS Grid, terdapat penggunaan dasar yang perlu kamu pahami, seperti penulisan properti display dengan menuliskan nilai grid atau inline-grid. Penggunaan display: grid; digunakan untuk membuat elemen menjadi grid container, sehingga kamu bisa mengatur gap, grid-template-rows, dan grid-template-columns.

Selain itu, perlu memahami dasar CSS Grid lainnya, seperti grid columns, grid rows, grid gap, grid lines, grid container, dan grid item.

Contoh CSS Grid sederhana: Mari kita membuat salah satu bentuk layout website artikel seperti gambar berikut:

Kamu bisa mencoba membuat layout seperti gambar di atas dengan menuliskan kode berikut ini:

Codepen Flexbox

<div class="article-layout">
    <header>Header</header>
    <aside class="sidebar">Sidebar</aside>
    <section class="article">Article</section>
    <footer>Footer</footer>
</div>

.article-layout {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar article"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    gap: 15px;
    padding: 20px;
    background-color: #f9f9f9;
}

header {
    grid-area: header;
    background-color: #ccc;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.sidebar {
    grid-area: sidebar;
    background-color: #eaeaea;
    padding: 10px;
}

.article {
    grid-area: article;
    background-color: #fff;
    padding: 20px;
}

footer {
    grid-area: footer;
    background-color: #ccc;
    padding: 10px;
    text-align: center;
}

Penjelasan Kode di atas:

1. Menggunakan display: grid; sebagai elemen grid container, sehingga memungkinkan kamu untuk menggunakan properti grid lainnya.
2. grid-template-areas digunakan untuk menentukan nama area yang ada di dalam grid tersebut. Pada contoh kode dan gambar di atas, "header header" berarti area header akan memakan dua kolom penuh pada baris awal atau pertama. Kemudian pada baris kedua akan diisi "sidebar article", dimana area sidebar terdapat di kolom pertama dan area article di kolom kedua. Selanjutnya "footer footer" sama seperti area header yang akan memakan dua kolom penuh di baris ketiga atau terakhir.
3. grid-template-columns: 1fr 3fr; dalam kode tersebut digunakan untuk menentukan ukuran lebar kolom. Pada kolom pertama 1fr, sidebar akan mengambil 1 bagian dari total ruang yang tersedia, sedangkan 3fr digunakan untuk area article yang akan mengambil 3 kolom dari total yang tersedia pada kolom kedua.
4. Kode tersebut untuk memiliki jarak antar baris dan kolom sebesar 15px yang ditentukan menggunakan gap: 15px;
5. padding: 20px; digunakan untuk memberikan jarak di dalam area .article-layout dengan jumlah 20px di sekelilingnya.

Untuk lebih detail penjelasan terkait penggunaan CSS Grid, kamu bisa mengunjungi laman artikel berikut, Layout dengan Grid.

Waktu untuk Menggunakan Flexbox

Gunakan Flexbox saat kamu ingin: 1. Membuat Elemen Dapat Menyesuaikan Area Secara Otomatis Kamu bisa menggunakan Flexbox saat ingin elemen dalam tata letak website dapat menyesuaikan ukuran layar secara fleksibel dan responsif. Contohnya, saat ingin mengatur elemen menu navigasi yang setiap ukurannya bisa berubah menyesuaikan lebar layar yang digunnakan pengguna.

2. Hanya Ingin Mengatur Jarak dalam Satu Dimensi Berbeda dengan CSS Grid yang bisa mengatur 2 dimensi sekaligus, Flexbox hanya bisa mengatur satu dimensi saja, antara horizontal atau vertikal.

3. Mengatur Ruang Elemen secara Seragam Flexbox dapat digunakan saat kamu ingin membagi ruang elemen kamu secara proposional atau memastikan jarak antar elemen dapat seragam, tidak tinggi atau lebar sebelah.

Contoh penggunaan flexbox: Properti display yang digunakan, yakni display: flex;. Selain itu, properti flexbox lainnya terdiri, flex-direction, flex-wrap, dan justify-content.

Contoh Flexbox sederhana: Mari kita membuat salah satu contoh sederhana dari css flexbox seperti gambar berikut: Untuk membuat layout flexbox seperti gambar di atas, kamu bisa menggunakan kode berikut ini: Codepen Flexbox

<div class="container">
    <div class="item">Satu</div>
    <div class="item">Dua</div>
    <div class="item">Tiga</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  background-color: #444;
  padding: 10px;
  color: white;
}

.item {
    padding: 5px 10px;
    background-color: #222;
}

Penjelasan Kode di atas:

1. display: flex; digunakan untuk mengatur elemen .container sebagai flex container, agar elemen class .item dapat dimasukkan sebagai flex items.
2. Dalam flexbox, kita menggunakan properti justify-content untuk mengatur posisi dari elemen anak atau item di dalam container. Pada kode di atas, kita menggunakan justify-content: space-between; untuk memberikan ruang kosong diantara setiap elemen anak, tanpa memberikan ruang kiri dan kanan pada container-nya.

Contoh CSS Flexbox Lainnya

Mari kita membuat layout header sederhana menggunakan css flexbox seperti gambar berikut:

Untuk membuat layout header menggunakan flexbox seperti gambar di atas, kamu bisa menggunakan kode berikut ini:

Codepen Flexbox Header

<nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 10px 20px;
}

.nav-links {
    display: flex;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

.logo {
    font-size: 20px;
    font-weight: bold;
}

Penjelasan Kode di atas:

1. Untuk mengatur elememn navbar agar menjadi flex container, kita menggunakan display: flex;
2. justify-content: space-between; digunakan untuk mengatur posisi elemen di dalam navbar seperti logo dan menu lainnya agar memiliki ruang yang merata serta memposisikan logoo di sisi kiri.
3. Untuk menjaga agar elemen-elemen dalam navbar sejajar secara vertikal yang berada di tengah atau y-axis, kita menggunakan align-items: center;

Kamu juga bisa mengunjungi laman artikel berikut, Belajar Flexbox CSS untuk mengetahui lebih detail cara menggunakan CSS Flexbox.

Menggabungkan CSS Grid dan Flexbox

Keduanya bukanlah kompetitor, sehingga kamu dapat menggabungkan secara bersamaan agar bisa saling melengkapi dan menambah fleksibilitas dalam membuat tata letak websitemu. Kamu bisa menggunakan Grid untuk membangun struktur yang besar, seperti area header, footer, kemudian kamu bisa menggunakan Flexbox untuk mengatur elemen kecil lainnya yang berada pada area tersebut, seperti menu, ikon atau tombol.

Contoh Penggunaan CSS Grid dan Flexbox secara Bersama

Yuk buat tata letak halaman website menggunakan css flexbox dan grid secara bersamaan seperti gambar berikut: Untuk membuat layout header menggunakan flexbox seperti gambar di atas, kamu bisa menggunakan kode berikut ini: Codepen CSS Grid dan Flexbox secara Bersamaan

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

.page-layout {
    display: grid;
    grid-template-areas:
        "header header"
        "nav main"
        "nav sidebar"
        "footer footer";
    grid-template-columns: 1fr 3fr;
    gap: 10px;
}

header {
    grid-area: header;
    background-color: #ddd;
    padding: 10px;
    text-align: center;
}

nav {
    grid-area: nav;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

main {
    grid-area: main;
    background-color: #fff;
    padding: 10px;
}

aside {
    grid-area: sidebar;
    background-color: #eaeaea;
    padding: 10px;
}

footer {
    grid-area: footer;
    background-color: #ddd;
    text-align: center;
    padding: 10px;
}

Penjelasan kode di atas:

1. Pada struktur HTML, kita menggunakan <div class="page-layout"> sebagai elemen pembungkus utama untuk elemen anak.
2. Kita menggunakan grid pada kode di atas untuk mengatur elemen class page-layout menjadi grid container.
3. Elemen-elemen anak (header, nav, main, sidebar, footer) pada elemen pembungkus utama page-layout dibungkus dengan menggunakan grid-template-areas;. Area header berada di baris pertama yang mencakup 2 kolom, baris kedua terdapat nav dengan menggambil area kiri dan main content sebelah kanan. Kemudian di baris ketiga diisi nav pada area kiri, area sidebar di sebelah kanan. Baris terakhir diisi oleh footer dengan mencakup 2 kolom.
4. Penggunaan flexbox pada kode di atas terletak pada elemen anak nav. Pada area nav, display: flex; digunakan agar item di dalam navigasi disusun secara vertikal.
5. Masih dibagian elemen anak nav, kita menggunakan flex-direction: column; untuk mengatur item navigasi agar disusun dalam bentuk satu kolom secara vertikal.

Kesimpulan

Penggunan CSS Grid dapat disesuaikan untuk tata letak yang memiliki dua dimensi dan tentunya struktur yang kompleks. Sedangkan Flexbox dapat digunakan untuk struktur yang fleksibel dan dinamis, serta hanya bisa untuk 1 dimensi saja.

Bagaimana penjelasan terkait perbedaan dan cara penggunaan CSS Grid dan Flexbox ini? Dengan kamu memahami kapan harus menggunakan grid dan flexbox, kamu dapat mudah membuat layout website yang lebih responsif dan rapi.

Jika kamu ingin mempelajari lebih dalam terkait penggunaan CSS dalam mempercantik dan menambah estetika website kamu, join kelas Belajar Membuat Website dengan HTML dan CSS di Skodev.

Semangat belajar dan mengeksplor ilmu baru!