Jelajahi perbedaan antara metode tata letak CSS modern ini dengan masalah praktis: menyusun kolom.
Ketika berbicara tentang tata letak CSS, dua alat utama yang Anda inginkan adalah Grid dan Flexbox. Meskipun keduanya hebat dalam membuat tata letak, keduanya memiliki tujuan yang berbeda dan memiliki kekuatan dan kelemahan yang berbeda.
Pelajari bagaimana kedua metode tata letak berperilaku dan kapan harus menggunakan salah satu metode tersebut.
Perbedaan Perilaku CSS Flexbox dan Grid
Untuk membantu memvisualisasikan sesuatu, buatlah indeks.html file di folder pilihan Anda dan tempelkan markup berikut:
html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head><body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2><divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div><h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>
Kedua div berisi turunan yang sama persis sehingga Anda dapat menerapkan sistem berbeda untuk masing-masing div dan membandingkannya.
Anda juga dapat melihat bahwa HTML mengimpor file style sheet bernama gaya.css. Buat file ini di folder yang sama dengan indeks.html dan rekatkan gaya berikut ke dalamnya:
body {
padding: 30px;
}h1 {
color: #A52A2A;
}h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}
Halaman Anda akan terlihat seperti ini:
Sekarang, giliran yang pertama ke dalam kolom fleksibel, cukup tambahkan kode berikut ke style sheet Anda:
.flex-container {
display: flex;
}
Inilah hasilnya:
Itu wadah fleksibel div sekarang menjabarkan elemen turunannya dalam kolom. Kolom ini fleksibel dan responsif—mengadaptasi lebarnya berdasarkan ruang yang tersedia di area pandang. Perilaku ini adalah salah satu yang utama konsep dasar di balik Flexbox.
Untuk mencegah kolom meluap di wadah fleksibel, Anda dapat menggunakan bungkus fleksibel Properti:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Jika tidak ada cukup ruang untuk elemen turunan untuk muat dalam satu baris, sekarang elemen tersebut akan membungkus dan melanjutkan ke baris berikutnya.
Sekarang terapkan tata letak Grid ke yang kedua menggunakan CSS ini:
.grid-container {
display: grid;
}
Tidak ada yang akan terjadi hanya dengan deklarasi di atas karena perilaku default Grid membuat baris yang bertumpuk satu sama lain.
Untuk beralih ke tampilan kolom, Anda perlu mengubah aliran otomatis jaringan properti (yaitu baris secara default):
.grid-container {
display: grid;
grid-auto-flow: column;
}
Sekarang inilah hasilnya:
Untuk menentukan jumlah kolom yang Anda inginkan pada setiap baris, gunakan kolom-templat-kisi:
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
Nilai ini menghasilkan lima kolom dengan lebar yang sama. Untuk mendapatkan perilaku pembungkusan yang mirip dengan Flexbox, Anda dapat menggunakan properti responsif seperti pas otomatis Dan min-maks:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Anda akan sering mendengar Flexbox dan Grid masing-masing disebut sebagai satu dimensi dan dua dimensi. Namun hal tersebut tidak sepenuhnya benar, karena Flexbox dan Grid dapat membuat sistem tata letak dua dimensi. Mereka hanya melakukannya dengan cara berbeda, dengan batasan berbeda.
Yang paling penting adalah cara Anda mengontrol aspek satu dimensi tata letak. Perhatikan gambar berikut, misalnya:
Amati seberapa konsisten kolom Grid dan seberapa tidak rata setiap kolom di Flexbox. Setiap baris/kolom dalam wadah fleksibel tidak bergantung satu sama lain. Jadi beberapa mungkin lebih besar dari yang lain, bergantung pada ukuran kontennya. Ini kurang seperti kolom dan lebih seperti blok independen.
Grid bekerja secara berbeda, dengan menyiapkan grid 2D dengan kolom terkunci secara default. Kolom dengan teks pendek akan berukuran sama dengan kolom dengan teks lebih panjang, seperti yang ditunjukkan gambar di atas.
Singkatnya, CSS Grid sedikit lebih terstruktur, sedangkan Flexbox lebih terstruktur sistem tata letak yang fleksibel dan responsif. Sistem tata letak alternatif ini sudah terkenal!
Kapan Menggunakan Flexbox
Apakah Anda ingin mengandalkan ukuran intrinsik setiap kolom/baris, sebagaimana ditentukan oleh kontennya? Atau apakah Anda ingin memiliki kontrol terstruktur dari sudut pandang orang tua? Jika jawaban Anda adalah yang pertama, maka Flexbox adalah solusi tepat untuk Anda.
Untuk mendemonstrasikannya, pertimbangkan menu navigasi horizontal. Ganti markup di dalam tag dengan ini:
<h1>Flexbox vs. Gridh1><headerclass="flex">
<h2>Flexboxh2><nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header><headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>
Ganti markup di file CSS dengan ini:
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}
Inilah hasilnya:
Sekarang, ubah navigasi pertama menjadi tata letak fleksibel dan navigasi kedua menjadi tata letak kisi dengan menambahkan CSS berikut:
.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Bandingkan hasilnya untuk melihat mana yang lebih cocok:
Dari gambar di atas, Anda dapat melihat bahwa Flexbox adalah solusi tepat dalam kasus ini. Anda memiliki item yang ingin Anda letakkan di samping satu sama lain dan mempertahankan ukuran intrinsiknya (besar atau kecil bergantung pada panjang teks). Dengan Grid, setiap sel memiliki lebar tetap, dan tampilannya tidak terlalu bagus—setidaknya dengan tautan teks biasa.
Kapan Menggunakan CSS Grid
Salah satu keunggulan Grid adalah ketika Anda ingin membuat sistem yang kaku dari induknya. Contohnya adalah sekumpulan elemen kartu yang harus memiliki lebar yang sama, meskipun mengandung jumlah konten yang berbeda.
Ganti markup di dalam tag dengan ini:
<h1>Flexbox vs. Gridsh1><sectionclass="cards">
<h2>Some cardsh2><divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p><ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article><articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>
Tambahkan CSS ini:
.columns {
display: flex;
gap: 1em;
}article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
Anda memulai dengan tampilan Flexbox untuk melihat tampilannya, sehingga Anda dapat membandingkannya dengan tampilan grid. Inilah hasilnya:
Perhatikan bagaimana kolom terakhir lebih besar dari yang lain karena ukuran intrinsiknya, yang mana Flexbox menanganinya dengan baik. Namun untuk membuatnya memiliki lebar yang sama menggunakan Flexbox, Anda harus melawan ukuran intrinsik tersebut dengan menambahkan yang berikut:
.columns > * {
flex: 1;
}
Ini berhasil. Tapi Grid lebih cocok untuk kasus seperti ini. Anda cukup menentukan jumlah kolom, dan Anda siap melakukannya:
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
Inilah hasilnya:
Keuntungan lain menggunakan Grid adalah orang tua mengontrol tata letak anak-anaknya. Jadi Anda dapat menambah dan menghapus elemen anak tanpa khawatir merusak tata letaknya.
Jadi Kapan Sebaiknya Gunakan Grid atau Flexbox?
Singkatnya, CSS Grid sangat bagus ketika Anda menginginkan kontrol terstruktur dari sudut pandang induk, dengan ukuran kolom yang sama terlepas dari ukuran konten individualnya.
Flexbox, sebaliknya, ideal bila Anda menginginkan sistem yang lebih fleksibel berdasarkan ukuran intrinsik elemen.
