CSS Grid atau Flexbox: Mana yang Lebih Baik untuk Membuat Kolom?

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 adalah sistem tata letak yang lebih 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. Grid</h1>

<header class=“flex”>
<h2>Flexbox</h2>

<nav>
<ul class=“nav-list”>
<li><a href=“”>Home</a></li>
<li><a href=“”>About Us</a></li>
<li><a href=“”>Service Information Goes Here</a></li>
<li><a href=“”>Blog Contact</a></li>
<li><a href=“”></a></li>
</ul>
</nav>
</header>

<header class=“grid”>
<h2>Grid</h2>

<nav>
<ul class=“nav-list”>
<li><a href=“”>Home</a></li>
<li><a href=“”>About Us</a></li>
<li><a href=“”>Service Information Goes Here</a></li>
<li><a href=“”>Blog Contact</a></li>
<li><a href=“”></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) solid black;
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. Grids</h1>

<section class=“cards”>
<h2>Some cards</h2>

<div class=“columns”>
<article class=“card”>
<h3 class=“card__title”>Fun Stuff</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>

<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>

<article class=“card”>
<h3 class=“card__title”>Fun Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>

<article class=“card”>
<h3 class=“card__title”>A Longer Title Than Others</h3>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!</p>

<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</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.