CSS - Grid Atau Flexbox, Pilih Mana?

Ketika anda melakukan desain halaman web responsif, Anda pastinya mau membuat layout dengan HTML yang terstruktur bagus, dengan tata letak CSS untuk konten perancah. Nah Inilah sering disebut sebagai modul tata letak atau layout module, dan itu sangat berguna ketika anda dalam mengelola desain yang penyesuaiannya responsif namun sangat kompleks. Biasanya para web developer menggunakan cara tabel. Sedangkan sekarang, Anda bisa melakukan semua itu dengan membuat modul CSS grid dengan float item bersama dalam baris atau bisa dengan teknologi CSS yang lebih baru disebut Flexbox. Inilah pembahasan kita pada materi kita ini.

/photo/app-background-blur-business-545331/

Sebelumnya, kita harus paham bahwa CSS Grid berfungsi baik dengan tata letak item dalam dua dimensi, seperti baris dan kolom, sedangkan flexbox menjabarkan item dalam satu dimensi, baik dalam satu baris atau kolom. Baik CSS Grid ataupun flexbox mempunyai value property yang sama. Adapun keduanya memerlukan parent container yang memanipulasi posisi dari child element.

Maksudnya seperti ini, seperti CSS property atau HTML, ada cara yang ditentukan untuk menyelesaikan TASK, tapi sintaks dan semantik tertentu lebih cocok untuk situasi tertentu. Oke, jika belum paham kita bahas saja keunggulan Grid dan Flexbox, dan situasi di mana yang lebih masuk akal atau yang lebih cocok dengan desain anda nantinya untuk menggunakan satu tata letak tersebut daripada yang lain.

Grid Layout Module atau Modul Tata Letak Grid

Layout menggunakan CSS Grid, harus menambahkan display: grid di sebuah elemen dan property grid untuk mengatur ukuran elemen dan grid-gap untuk mengatur jarak antar elemen. CSS grid sebenarnya berguna ketika anda ingin mengatur struktur tata letak tingkat elemen yang lebih tinggi seperti headers, sections, asides, dan footers, saat menerapkan true grid dengan gutters.

Ketika anda ingin membagi halaman web menjadi kolom dan baris, berdasarkan ukuran, posisi, dan layer, disini Anda mempunyai kemampuan untuk memposisikan dan mengukur elemen blok bangunan dengan CSS Grid. Sehingga dapat dikatakan Grid memberi Anda fleksibilitas dalam menggunakan CSS untuk mengubah posisi elemen, tanpa perubahan apa pun ke HTML. Bahkan keuntungannya, tidak adanya struktur konten di Grid membantu anda mengelola perubahan pada tata letak dengan menggunakan fluid dan source order independent layout.

Dengan memisahkan struktur tata letak dari konten, lebih mudah untuk mengubah tata letak beberapa perangkat melalui media kueri. Dengan menggabungkan Media Queries dengan properti CSS akan mengontrol tata letak Grid dan anak-anaknya, Anda dapat beradaptasi pada tata letak Anda untuk perubahan faktor bentuk perangkat, orientasi, dan ruang yang tersedia, menggunakan breakpoint yang berbeda.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    .container {
  display: grid;
  grid: 80px / 50px 50px 50px;
  grid-gap: 10px;
  background-color: lightblue;
  padding: 10px;
}
.container>div {
  background-color: yellow;
  text-align: center;
  padding:25px;
  font-size: 35px;
}
</style>
</head>
<body>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
</div>
</body>
</html>

grid1

Flexbox Layout Module atau Module Tata Letak Flexbox

Sedangkan Flexbox memungkinkan konten halaman web, dimana Anda bisa mengontrol cara ditampilkannya, baik itu baris per baris atau kolom per kolom.

Untuk membuat layout menggunakan Flexbox, harus menambahkan display: flex untuk mendefinisikan Flexbox pada sebuah elemen dan flex-direction untuk mengatur arah elemen : column atau row.

Flexbox paling cocok untuk menargetkan posisi child elements dan hubungan spasialnya dalam parent element. Ini menyediakan solusi fluid untuk menyelaraskan dan mengatur jarak elemen. Dalam model tata letak Flexbox, children of Flexbox container dapat ditata ke segala arah, dan dapat mengubah ukurannya juga meninggikannya untuk mengisi ruang yang tidak terpakai atau menyusut untuk menghindari terjadinya overflowing pada parent element.

Anda bisa dengan mudah memanipulasi perataan horizontal dan vertikal dari child elements. Juga bisa membuat tata letak dalam dua dimensi dengan menumpuk elemen halaman (horizontal di dalam vertikal atau vertikal di dalam horizontal). Pada dasarnya, jika Anda memiliki banyak item dan tidak membutuhkannya berbaris dengan elemen lain di halaman, tetapi hanya ingin mereka ditampilkan secara merata dan secara fleksibel, Anda bisa menggunakan Flexbox. Namun harus diingat sekarang flexbox baru untuk CSS sehingga ketika anda menggunakannya harus memperhitungkan keterbatasan support browser. Versi ini didukung oleh browser Microsoft Edge, tetapi ada terdapat documented support issues untuk IE 11 serta versi Firefox, Safari, dan Chrome.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
.container {
   display : flex;
   flex-direction : row;
   background-color: lightblue;
}

.container > div {
  background-color: yellow;
  margin: 10px;
  padding: 25px;
  font-size: 35px;
}

@media (max-width: 700px) {
    .container {
        flex-direction: column;
    }

    .container>div {
        margin-right: 10px;
        margin-bottom: 10px;
    }
}
</style>
</head>
<body>
<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
</div>
</body>
</html>

grid2

Singkatnya, anda baiknya menggunakan tata letak Grid untuk struktur halaman utama dari baris dan kolom, dan menggunakan Flexbox untuk navigasi, elemen UI, dan item halaman web lainnya yang berfungsi lebih baik dengan tata letak linear. Karena CSS Grid sesuai untuk tata letak halaman secara keseluruhan, dan untuk halaman yang rumit komponen yang tidak linier dalam desainnya sedang Flexbox sesuai untuk banyak tata letak, dan banyak elemen komponen halaman, karena sebagian besar dari mereka pada dasarnya linier. Jadi keduanya bisa anda gabungkan ketika akan mendesain layout website anda. Selamat Mencoba