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, danorder.
Contoh mengubah urutan tampilan
flex-direction
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.
flex-wrap
Mengatur wrap-reverse untuk properti flex-wrap membalikkan urutan baris yang terbungkus dari arah biasanya.
1.flex-container {
2 flex-direction: row;
3 flex-wrap: wrap-reverse;
4}Dengan cara ini, baris ditampilkan menumpuk dari bawah ke atas.
1.flex-container {
2 flex-direction: column;
3 flex-wrap: wrap-reverse;
4}Ketika flex-direction diatur ke column dan flex-wrap diatur ke wrap-reverse, item disusun secara vertikal sementara kolom dibungkus dari kanan ke kiri. Seperti dalam contoh ini, urutan kolom dibalik dari kiri ke kanan yang biasa, dan item ditambahkan dari kanan ke kiri.
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; }Dalam contoh ini, properti grid-template-areas digunakan untuk secara visual mendefinisikan tata letak grid keseluruhan dan menetapkan nama area ke setiap sel. Kemudian, dengan menetapkan nama grid-area yang sesuai pada setiap elemen anak, mereka ditempatkan pada posisi yang diinginkan. Dengan menggunakan grid dengan cara ini, Anda tidak hanya dapat dengan bebas mengubah urutan tampilan elemen, tetapi juga dengan mudah membuat tata letak yang kompleks dan 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.