CSS Grid vs Flexbox

Pada pembuatan layout dengan HTML dan CSS seperti yang kita ketahui dapat menggunakan cara table (cara jadul), Flexbox, CSS Grid, atau CSS property (float). Sesuai dengan judul artikel ini CSS Grid vs Flexbox, dari kedua cara tersebut maka manakah yang lebih sederhana tetapi baik dalam segi responsif.

Position The Page Sections

Pada kasus ini kita akan melihat perbedaan dari Flexbox dan CSS grid dalam mengatur posisi pada setiap elemen.

Flexbox

Untuk membuat layout menggunakan Flexbox, kita menambahkan display: flex untuk mendefinikan Flexbox pada sebuah elemen dan flex-direction (untuk mengatur arah elemen : column atau row).

See the Pen Flexbox basic by Budhiluhoer (@Budhiluhoer) on CodePen.

Belajar CSS Flexbox dalam 5 menit

CSS Grid

Untuk membuat layout menggunakan CSS Grid, kita menambahkan display: grid di sebuah elemen dan property grid(mengatur ukuran elemen) & grid-gap (untuk mengatur jarak antar elemen).

See the Pen Grid CSS by Budhiluhoer (@Budhiluhoer) on CodePen.

Mudah mengatur layout HTML dengan CSS Grid

Align Header Components

Selanjutnya kita coba dengan membangun header dengan Flexbox dan CSS Grid, konten HTML yang digunakan hanya elemen navigasi dan tombol.

Flexbox

See the Pen header flexbox by Budhiluhoer (@Budhiluhoer) on CodePen.

Pertama kita definisikan display : flex; dan memberikan jenis perataan pada elemen dengan property justify-content, kemudian kita isi dengan nilai space-between yang memberikan jarak pada elemen. Property justify-content memiliki nilai yang lain, antara lain:

• flex-start (default)
• flex-end
• center
• space-between
• space-around
• space-evenly
  

Silahkan coba-coba sendiri nilai-nilai di atas untuk melihat hasilnya.

CSS Grid

See the Pen header with css grid by Budhiluhoer (@Budhiluhoer) on CodePen.

Pada elemen nav kita posisikan pada sisi kiri dengan property justify-self : start dan elemen button pada sisi kanan dengan property justify-self : end. Agar lebih memahami bisa dicoba sendiri untuk melihat hasilnya.

Make Page Responsive

Terakhir kita akan mencoba kedua teknik tersebut dalam segi responsif. Pada kasus ini kita gunakan teknik media query yang merupakan salah satu dari penerapan halaman yang responsif.

<div class="container">
  <div class="satu">1</div>
  <div class="dua">2</div>
  <div class="tiga">3</div>  
</div>

Flexbox

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

    .container>div {
        margin-right: 10px;
        margin-bottom: 60px;
    }
}

CSS Grid

Pada teknik CSS Grid, pertama kita definisikan sesuai area tiap elemen.

.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";
    }
}

Panduan membuat CSS Grid sederhana dengan SASS

Kesimpulan

CSS Grid

• CSS Grid sangat bagus dalam mengatur gambar yang besar.
• CSS Grid digunakan untuk layout yang berdua dimensi (kolom dan baris).

Flexbox

• Flexbox sangat bagus dalam mengatur perataan tiap elemen. Digunakan dalam memposisikan elemen yang lebih kecil atau detail.
• Flexbox sangat baik untuk layout yang satu dimensi (kolom atau baris) .

Dari kedua teknik tersebut memiliki kelebihan dan kekurangan tersendiri. Tetapi dapat dikolaborasikan agar dapat disesuaikan dengan kebutuhan dan elemen yang digunakan.

Sumber : https://tutorialzine.com/2017/03/css-grid-vs-flexbox