Articles
Pengenalan ke CSS
Perbandingan antara Flexbox, Grid, dan Kolom Tata Letak

Perbandingan antara Flexbox, Grid, dan Kolom Tata Letak

Artikel ini menjelaskan perbandingan antara Flexbox, Grid, dan Kolom Tata Letak.

Anda akan mempelajari perbedaan antara Flexbox, Grid, dan Kolom Tata Letak, serta kapan harus menggunakan masing-masing.

YouTube Video

HTML untuk Pratinjau

css-layout-comparision.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>CSS Properties Example</title>
 7  <link rel="stylesheet" href="css-base.css">
 8  <link rel="stylesheet" href="css-layout-comparision.css">
 9</head>
10<body>
11  <!-- Header -->
12  <header>
13      <h1>CSS Properties For Layout</h1>
14  </header>
15  <!-- Main content -->
16  <main>
17    <header>
18        <h2>Layout Comparision</h2>
19    </header>
20    <article>
21      <h3>flex</h3>
22      <section>
23        <section class="sample-view">
24          <div class="flex-container">
25            <div class="flex-item">Item 1</div>
26            <div class="flex-item">Item 2</div>
27            <div class="flex-item">Item 3</div>
28            <div class="flex-item">Item 4</div>
29            <div class="flex-item">Item 5</div>
30            <div class="flex-item">Item 6</div>
31            <div class="flex-item">Item 7</div>
32            <div class="flex-item">Item 8</div>
33            <div class="flex-item">Item 9</div>
34          </div>
35        </section>
36      </section>
37    </article>
38    <article>
39      <h3>grid</h3>
40      <section>
41        <section class="sample-view">
42          <div class="grid-box">
43            <div class="grid-item item1">Item 1</div>
44            <div class="grid-item item2">Item 2</div>
45            <div class="grid-item item3">Item 3</div>
46            <div class="grid-item item4">Item 4</div>
47            <div class="grid-item item5">Item 5</div>
48            <div class="grid-item item6">Item 6</div>
49            <div class="grid-item item7">Item 7</div>
50            <div class="grid-item item8">Item 8</div>
51            <div class="grid-item item9">Item 9</div>
52          </div>
53        </section>
54      </section>
55    </article>
56    <article>
57      <h3>column</h3>
58      <section>
59        <section class="sample-view">
60          <section class="columns-container">
61            <p class="columns-item">Item 1</p>
62            <p class="columns-item">Item 2</p>
63            <p class="columns-item">Item 3</p>
64            <p class="columns-item">Item 4</p>
65            <p class="columns-item">Item 5</p>
66            <p class="columns-item">Item 6</p>
67            <p class="columns-item">Item 7</p>
68            <p class="columns-item">Item 8</p>
69            <p class="columns-item">Item 9</p>
70          </section>
71        </section>
72      </section>
73    </article>
74  </main>
75</body>
76</html>

Perbandingan antara Flexbox, Grid, dan Kolom Tata Letak

CSS flex, grid, dan columns adalah teknik untuk merapikan dan mengatur elemen, tetapi masing-masing memiliki kekuatan dan kasus penggunaan yang ideal. Berikut adalah penjelasan yang jelas tentang perbedaan mereka melalui perbandingan.

Flexbox（display: flex） 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    flex-wrap: wrap;
 6    background-color: lightblue;
 7    height: 200px;
 8}
 9
10.flex-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 70px;
15    height: auto;
16}

Fitur

  • Cocok untuk tata letak satu arah—baik horizontal atau vertikal.
  • Memungkinkan kontrol fleksibel atas urutan dan fleksibilitas elemen.
  • Paling cocok untuk tata letak skala kecil seperti bilah navigasi dan grup tombol.

Keunggulan

  • Secara otomatis menyesuaikan ukuran elemen anak.
  • Anda dapat mengubah urutan elemen menggunakan properti seperti flex-direction, flex-wrap, dan order.

Contoh mengubah urutan tampilan

Sebagai contoh mengubah urutan tampilan, mari kita atur properti flex-direction ke column.

1.flex-container {
2    flex-direction: column;
3}

Ketika flex-direction diatur ke column, item berubah dari tata letak horizontal menjadi vertikal. Tata letak berubah dari kiri-ke-kanan menjadi atas-ke-bawah.

Grid（display: grid） 

 1.grid-box {
 2    display: grid;
 3    grid-template-columns: 100px 100px 100px;
 4    grid-template-rows: 50px 50px 50px;
 5    gap: 20px;
 6    background-color: lightblue;
 7    border: none;
 8    height: 200px;
 9}
10
11.grid-item {
12    background-color: lightskyblue;
13    width: 100%;
14    padding: 0;
15    text-align: center;
16}

Fitur

  • Ideal untuk tata letak dua dimensi.
  • Memungkinkan definisi yang jelas dari tata letak berbasis grid.
  • Bagus untuk desain yang lebih kompleks dan struktur halaman secara keseluruhan.

Keunggulan

  • Baris dan kolom dapat didefinisikan secara bersamaan.
  • Bagian dapat ditempatkan menggunakan area bernama (grid-area).
  • Elemen anak dapat ditempatkan secara bebas di dalam grid, memungkinkan kontrol urutan yang fleksibel.

Contoh mengubah urutan tampilan

Sebagai contoh mengubah urutan tampilan, mari gunakan properti grid-template-areas untuk mengatur posisi tampilan.

 1.grid-box {
 2    grid-template-areas:
 3        "item1 item4 item5"
 4        "item2 item6 item7"
 5        "item3 item8 item9";
 6}
 7
 8.item1 { grid-area: item1; }
 9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }

Seperti yang Anda lihat, grid dapat digunakan tidak hanya untuk mengubah urutan tampilan tetapi juga untuk membuat tata letak yang unik.

Columns（column-count, column-width） 

 1.columns-container {
 2    background-color: lightblue;
 3    columns: 100px 3;
 4    column-gap: 20px;
 5    column-rule: 2px solid #333;
 6    padding: 10px;
 7}
 8
 9.columns-item {
10    background-color: lightskyblue;
11    text-align: center;
12    margin: 20px auto;
13    color: white;
14    display: flex;
15    align-items: center;
16    justify-content: center;
17    font-size: 1.2rem;
18    border: 1px solid #ccc;
19    height: 50px;
20}

Fitur

  • Anda dapat dengan mudah membuat kolom gaya majalah.
  • Ideal untuk konten teks yang mengalir.
  • Mengikuti urutan sumber HTML, sehingga kurang cocok untuk mengontrol urutan elemen.

Keunggulan

  • Dapat secara otomatis membagi teks panjang.
  • Anda dapat dengan sangat mudah membuat tata letak gaya surat kabar.

Tabel Perbandingan

Fitur / Kasus Penggunaan Flexbox Grid Kolom
Dimensi Tata Letak 1D (horizontal atau vertikal) 2D (horizontal & vertikal) 1D (vertikal)
Terbaik Untuk Penjajaran komponen Struktur halaman penuh Teks multi-kolom
Fleksibilitas Tata Letak Tinggi (urutan & ukuran) Sangat Tinggi (definisi area) Rendah (hanya auto-split)
Kontrol Elemen Anak Fleksibel Jelas didefinisikan Sulit untuk dikontrol
Tujuan Tata Letak Berbasis konten Berbasis tata letak Berbasis teks

Ringkasan

  • Flexbox ideal ketika Anda ingin menjajarkan elemen secara horizontal, seperti header atau daftar kartu.
  • Grid cocok ketika Anda ingin merancang seluruh tata letak, seperti struktur sebuah halaman web.
  • Kolom adalah yang terbaik ketika Anda ingin memformat teks menjadi banyak kolom, seperti dalam artikel atau blog.

Anda juga dapat menggabungkannya sesuai kebutuhan. Sebagai contoh, Anda dapat mendesain tata letak keseluruhan dengan Grid dan merapikan elemen internal dengan Flex.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS Terkait Tata Letak Kolom