Pertemuan 4: CSS Layout – Flexbox dan Grid

20 Sep 2026kribbiadminWeb Programming

Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, mahasiswa mampu menyusun tata letak halaman menggunakan Flexbox dan Grid serta memahami kapan memilih masing-masing teknik.

Pentingnya Layout

Layout menentukan bagaimana elemen disusun di dalam halaman. Sebelum CSS modern, pengaturan tata letak dilakukan dengan float dan tabel yang rumit dan rapuh. Kini CSS menyediakan dua alat utama: Flexbox untuk penyusunan satu dimensi (baris atau kolom) dan Grid untuk dua dimensi (baris dan kolom sekaligus).

Memilih alat yang tepat membuat kode lebih pendek dan mudah dipahami. Sebagai jalan pintas, gunakan Flexbox untuk menyusun deretan elemen dalam satu arah dan Grid untuk menyusun keseluruhan halaman sebagai kisi.

Flexbox

Flexbox bekerja pada wadah (container) dengan properti display: flex. Arah utama diatur dengan flex-direction yang bernilai row, column, row-reverse, atau column-reverse. Properti justify-content mengatur posisi sepanjang sumbu utama dan align-items mengatur posisi pada sumbu silang. Properti gap menambahkan jarak antar item.

Contoh paling umum adalah membuat menu navigasi horizontal dan meratakan elemen kartu di tengah. Cukup dengan empat baris pengaturan, elemen langsung tersusun rapi.

<code class="language-css">.navbar {
  display: flex;
  justify-content: space-between; /* sejajar sumbu utama */
  align-items: center;
  gap: 16px;
}
.box {
  flex: 1;  /* setiap item tumbuh sama besar */
}</code>

Grid

Grid mengatur elemen dalam kisi dua dimensi. Properti display: grid membuat wadah menjadi grid. Ukuran kolom ditentukan grid-template-columns dan baris dengan grid-template-rows. gunakan fr (fraction) untuk ruang yang fleksibel dan px untuk ukuran tetap. Properti gap memberi jarak antar sel.

Grid sangat berguna untuk menyusun galeri, dashboard, dan halaman dengan beberapa kolom seimbang tanpa perlu menghitung persentase secara manual.

<code class="language-css">.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* tiga kolom rata */
  gap: 20px;
}
.item { background: #eee; padding: 20px; }</code>

Perbedaan Kunci

Flexbox bersifat satu dimensi sehingga cocok untuk menavigasi deretan tombol atau menyusun kartu dalam satu baris yang responsif. Grid bersifat dua dimensi sehingga cocok untuk tata letak halaman penuh seperti header, sidebar, main, dan footer, atau galeri dengan jumlah sel tetap.

Keduanya saling melengkapi: sebuah halaman bisa memakai Grid untuk kerangka besarnya dan Flexbox di dalam setiap bagian untuk meratakan isi. Kombinasi ini adalah teknik standar di industri.

<code class="language-css">.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 220px 1fr;
  gap: 12px;
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }</code>

Langkah Praktik

Buat menu navigasi dengan Flexbox yang menampilkan logo di kiri dan tautan di kanan, sejajar secara vertikal. Kemudian buat halaman lengkap menggunakan Grid dengan area header, sidebar, main, dan footer. Kombinasikan keduanya dengan menambahkan baris kartu Flexbox di dalam area main.

Ubah jumlah kolom grid dari tiga menjadi dua dan amati bagaimana item otomatis menyesuaikan lebar tanpa mengubah markup HTML.

Konsep Kunci

Layout menentukan bagaimana elemen disusun di dalam halaman.
Sebelum CSS modern, pengaturan tata letak dilakukan dengan float dan tabel yang rumit dan rapuh.
Kini CSS menyediakan dua alat utama: Flexbox untuk penyusunan satu dimensi (baris atau kolom) dan Grid untuk dua dimensi (baris dan kolom sekaligus).
Memilih alat yang tepat membuat kode lebih pendek dan mudah dipahami.
Sebagai jalan pintas, gunakan Flexbox untuk menyusun deretan elemen dalam satu arah dan Grid untuk menyusun keseluruhan halaman sebagai kisi.
Flexbox bekerja pada wadah (container) dengan properti display: flex.
Arah utama diatur dengan flex-direction yang bernilai row, column, row-reverse, atau column-reverse.
Properti justify-content mengatur posisi sepanjang sumbu utama dan align-items mengatur posisi pada sumbu silang.
Properti gap menambahkan jarak antar item.
Contoh paling umum adalah membuat menu navigasi horizontal dan meratakan elemen kartu di tengah.
Cukup dengan empat baris pengaturan, elemen langsung tersusun rapi.
Grid mengatur elemen dalam kisi dua dimensi.
Properti display: grid membuat wadah menjadi grid.
Ukuran kolom ditentukan grid-template-columns dan baris dengan grid-template-rows.

Contoh Kode

<code class="language-css">.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.kartu { flex: 1; }</code>

<code class="language-css">.galeri {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.item { background: #eee; }</code>

Latihan

Bangun kerangka halaman berita yang memiliki header, sidebar navigasi, area konten dengan tiga kartu berita, dan footer. Gunakan Grid untuk kerangka besar dan Flexbox untuk meratakan isi setiap kartu serta menu navigasi.