Mengenal Flexbox dan Grid CSS ( Pengertian, Sejarah, dan Contoh Penerapan )

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>