Sebagian besar halaman web di internet yang kalian temui saat ini, ditulis dalam kombinasi HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets).
Singkatnya, HTML menentukan konten dan struktur logis halaman , sedangkan CSS menentukan tampilan seperti warna, font, pemformatan, tata letak, dan gayanya.
{getToc} $title={Table of Contents}
Mari kita mulai belajar tentang Flexbox dan Grid.. :)
Apa sih Flexbox?
CSS flexbox adalah cara khusus untuk menentukan tata letak halaman HTML,
Salah satu fitur yang paling menentukan dari flex layout adalah kemampuannya untuk menyesuaikan bentuk, berdasarkan lingkungan tampilannya.
Flexbox dapat menyesuaikan ukurannya—baik mengecil, untuk menghindari monopoli ruang yang tidak perlu, atau bertambah untuk memberi ruang bagi konten yang dibatasi dalam batas-batasnya.
Selain itu, Flex kurang membatasi dalam hal aliran konten dibandingkan, misalnya, jenis Block Layout dan inline, yang umumnya uni-directional.
Jalur atau arah flex dapat ditentukan ke kanan, ke kiri, ke atas, atau ke bawah. Item individu dalam flex container juga dapat secara otomatis disusun ulang dan diatur ulang agar sesuai dengan ruang tata letak yang tersedia.
Mengenal Sejarah Flex
Penggunaan Web pada tahun 2000-an secara intensif oleh Mobile Agent, memotivasi "liquid-layout" dan elemen responsif untuk variasi ukuran layar yang semakin besar.
Pada tahun 2010-an, penggunaan intensif Framework JavaScript populer, seperti Bootstrap, terinspirasi dari Flexbox, dan Grid Layout.
Modul CSS 3 menyertakan solusi yang mirip dengan ini, seperti flexbox dan grid.
Per September 2020 , 98,69% browser yang diinstal (99,29% browser desktop dan 100% browser seluler) mendukung Tata Letak Flexbox CSS.
Dari referensi yang saya dapatkan, proyek Flexbox ini dimulai dari 23 Juli 2009, dengan versi terbarunya ( Level 1 Flexbox, 9 november 2018 ) - lihat referensi
Apa itu Grid CSS Layout?
Grid CSS dapat membuat tata letak yang lebih asimetris daripada tata letak kotak sebelumnya seperti float CSS. Grid CSS Ini juga memungkinkan lebih banyak kode standar yang berfungsi di seluruh browser.
Satu masalah dengan menggunakan float di CSS adalah jika konten ditambahkan ke satu bagian halaman, hal itu dapat mengganggu aliran halaman dan merusak tata letak. Hal ini disebabkan oleh ketinggian yang bervariasi untuk elemen tata letak. Meskipun flexbox CSS mendukung tata letak yang fleksibel dan memberikan fleksibilitas untuk membuat tata letak yang kompleks, tetapi sistem kotak ini gagal ketika kebutuhan untuk membuat tata letak responsif dalam ruang 2 dimensi mulai muncul.
Mengenal Sejarah Grid CSS
CSS grid ini memiliki native name CSS Grid Layout Level 1 ini pertama dipublikasikan 7 April, 2007, versi terbaru Level 1 pada 18 Desember 2020 - baca referensi
Untuk versi preview yang level 2 pada 11 Maret 2021 W3C Candidate Recommendation Draft
Chrome, Firefox, Safari, dan Edge semuanya sudah mendukung grid CSS Sejak Oktober 2017 tanpa awalan vendor. IE 10 dan 11 mendukung grid CSS tetapi dengan spesifikasi yang sudah ketinggalan zaman. Di ponsel, semua browser modern mendukung grid CSS kecuali Opera Mini dan Brave Browser . Pengembang web yang menargetkan browser lama dapat menggunakan Modernizr 3.5.0 untuk mendeteksi dan menurunkan halaman web sesuai kebutuhan.
Contoh Penerapan Kode dengan Flexbox CSS
<html>
<head><title>flex sample</title>
<style>
.container {
display : flex;
flex-direction : row;
background-color: lightblue;
}
.container > div {
background-color: #ff6161;
margin: 10px;
padding: 20px;
font-size: 30px;
}
@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 class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</body>
</html>
Sekarang, coba anda copy itu ke Notepad -> Save as ( pilih all format ) menjadi Flex Sample.html
Lalu, silahkan anda menuju ke file html yang sudah anda buat tadi, lalu klik dua kali, maka akan terbuka di browser default anda.
Bedanya Flex dengan Grid?
Keduanya sama sama membuat tampilan menjadi responsive.. itu intinya.. jadi web kamu bisa menyesuaikan dengan baik di perangkat desktop maupun mobile.. :)
Contoh Penerapan Kode menggunakan GRID CSS
Berikut beberapa contoh penerapan GRID CSS dalam beberapa tujuan..
Ini contoh penerapan Grid untuk membuat Menu Navigasi
<html>
<head><title>Grid sample</title>
<style>
header{
display: grid;
grid-template-columns: 2fr 2fr;
list-style:none;
background-color:yellow;
padding:10px;
}
header nav {
justify-self: start;
}
header button {
justify-self: end;
}
header nav {
display: grid;
grid-template-columns: auto 1fr 1fr;
align-items: center;
}
nav li {
padding-right:10px;
}
nav li a {
text-decoration:none;
}
.container {
grid-area: container;
}
.satu {
grid-area: satu;
}
.dua {
grid-area: dua;
}
.tiga {
grid-area: tiga;
}
@media (max-width: 600px) {
.container {
grid-template-areas:
"container container"
"satu satu"
"dua dua"
"tiga tiga";
}
}
</style>
</head>
<body>
<header>
<nav>
<li><a href="#"><h1>Logo</h1></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</nav>
<button>Button</button>
</header>
</body>
</html>
Simpanlah dengan cara yang sama seperti Flexbox tadi menggunakan notepad, lalu save ke html. Setelah itu klik file htmlnya.
Hasilnya?
itu penerapannya untuk menu gans.... :)
Contoh penerapan Grid CSS untuk Tabel
<html>
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 0.5em;
}
div {
border: 1px solid;
}
</style>
<body>
<div class="wrapper">
<h3>Header1</h3><h3>Header2</h3><h3>Header3</h3>
<div>value11</div><div>value12</div><div>value13</div>
<div>value21</div><div>value22</div><div>value23</div>
<div>value31</div><div>value32</div><div>value33</div>
<div>value41</div><div>value42</div><div>value43</div>
<div>value51</div><div>value52</div><div>value53</div>
<div>value61</div><div>value62</div><div>value63</div>
<div>value71</div><div>value72</div><div>value73</div>
</div>
</body>
</html>
Contoh Penerapan Grid CSS pada Web Desain
<html>
<style>
div { border: 1px solid; }
body {
display: grid;
grid-template-columns: 10em auto 10em;
grid-template-areas:
"header header header"
"left middle right"
"footer footer footer";
}
</style>
<body>
<div style="grid-area: header">The header</div>
<div style="grid-area: footer">The footer</div>
<div style="grid-area: left">The left panel</div>
<div style="grid-area: middle; height: 200px">The main content area</div>
<div style="grid-area: right">The right panel</div>
</body>
</html>
Kesimpulan Flex vs Grid
Untuk memberi pemahaman yang lebih sederhana, anda bisa melihat gambar dibawah ini, sebagai perbandingan Grid dan Flexbox.
Itu untuk Pemahaman sederhananya, jadi Flexbox itu untuk 1 dimensi ( Karena 1 dimensi, maka searah aja ya ) dan Grid untuk 2 dimensi ( Ini kita bisa lebih eksplore 2 arah ). Fokus Grid CSS adalah lebih baik untuk layouting dibagian Web content. Sedangkan Flexbox berfokus / lebih baik pada layouting dibagian komponen.
Flexbox jelas merupakan cara yang tepat Jika Anda membuat situs web standar saja / sederhana hanya memerlukan satu arah saja, flex memberi Anda manfaat tata letak float, tanpa harus anda lakukan modifikasi yang aneh untuk mencapai fungsi tertentu. Jika Anda ingin membuat aplikasi web yang kompleks dan memiliki banyak fitur dan membutuhkan banyak bagian yang terbelah belah, mungkin seperti batu bata yang disusun membuat bangunan, atau pemahaman lebih mudahnya, aplikasi dengan banyak konten/kontrol, Anda dapat mempertimbangkan untuk menggunakan sistem kisi / grid untuk tata letak dasar Anda.
Lalu apakah CSS Grid tersebut dapat menggantikan Flexbox?
Tidak. Saya rasa tidak.
Grid jauh lebih baru daripada Flexbox dan memiliki dukungan browser yang lebih sedikit. Itulah mengapa masuk akal jika orang bertanya-tanya apakah grid CSS ada di sini untuk menggantikan Flexbox.
Ada beberapa argumen menarik tentang Grid dan Flexbox:
- Grid dapat melakukan hal-hal yang tidak dapat dilakukan Flexbox.
- Flexbox dapat melakukan hal-hal yang tidak dapat dilakukan Grid.
- Grid dan Flexbox dapat bekerja bersama: item GRID dapat menjadi Container / wadah flexbox. Item Flexbox bisa menjadi wadah Grid.
Ingat ya sob, saya bahas diatas, bahwa sebagian besar browser sudah mendukung GRID, kalo sekarang tahun 2021 sih udah lihat sendiri ya realisasinya.
Dan juga keduanya sama sama W3C
Hehe, template blogspot aja udah pada memakai khan.. :)
Sekian dulu ya pembahasan tentang Flexbox dan Grid CSS, moga ada manfaatnya.
Buat kalian, saya sudah sertakan sumber referensi pendukung untuk kalian pelajari, itu langsung dari sumbernya, tetapi sudah saya ubah urlnya jadi translate, jadi anda bisa langsung mempelajari CSS FLEX, maupun GRID.