Halo semuanya! 👋

Di artikel ini, kita bakal bahas tentang layout CSS — cara kita mengatur posisi dan tata letak elemen-elemen di halaman web. Kita akan bahas beberapa konsep penting seperti display, position, Flexbox, gap, dan float.

Yuk, langsung aja!

---

Table of Contents

1. Display Property
2. Position Property
3. Flexbox
4. Gap Property
5. Float
6. Kesimpulan

---

Display Property

display adalah property yang menentukan bagaimana sebuah elemen ditampilkan di halaman. Ada beberapa nilai yang sering digunakan:

block

Elemen block selalu mengambil lebar penuh dari parent-nya. Contoh: <div>, <p>, <h1>.

.block-example {
  display: block;
  width: 200px;
  background-color: #3b82f6;
  color: white;
  padding: 1rem;
  margin: 0.5rem 0;
}

inline

Elemen inline hanya mengambil lebar sesuai kontennya, dan tidak bisa diatur width atau height-nya. Contoh: <span>, <a>.

.inline-example {
  display: inline;
  background-color: #10b981;
  color: white;
  padding: 0.5rem;
}

inline-block

Kombinasi dari inline dan block. Elemen mengambil lebar konten TAPI bisa diatur width, height, margin, dan padding.

.inline-block-example {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: #f59e0b;
  color: white;
  margin: 0.5rem;
  padding: 1rem;
  text-align: center;
}

none

Elemen dengan display: none akan hilang total dari halaman — tidak memakan ruang sama sekali.

.hidden-example {
  display: none;
}

---

Position Property

position menentukan cara elemen diposisikan. Ada 4 nilai utama:

static (Default)

Semua elemen defaultnya static. Elemen mengikuti alur normal dokumen.

.static-example {
  position: static;
}

relative

Elemen diposisikan relative terhadap posisi normalnya. Ruang yang diambil elemen tetap ada.

.relative-example {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #8b5cf6;
  color: white;
  padding: 1rem;
}

absolute

Elemen diposisikan relative terhadap parent yang punya position: relative. Elemen ini “keluar” dari alur dokumen.

.parent {
  position: relative;
  width: 400px;
  height: 200px;
  background-color: #e5e7eb;
  padding: 1rem;
}

.absolute-example {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ef4444;
  color: white;
  padding: 0.75rem;
}

fixed

Elemen diposisikan relative terhadap viewport (layar browser). Elemen ini akan tetap di tempatnya meskipun halaman di-scroll.

.fixed-example {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #06b6d4;
  color: white;
  padding: 1rem;
  border-radius: 9999px;
}

sticky

Kombinasi relative dan fixed. Elemen berperilaku seperti relative sampai kamu scroll ke posisi tertentu, lalu berubah jadi fixed.

.sticky-example {
  position: sticky;
  top: 0;
  background-color: #1f2937;
  color: white;
  padding: 0.75rem;
  z-index: 10;
}

---

Flexbox

Flexbox adalah cara modern untuk membuat layout. Dengan Flexbox, kamu bisa dengan mudah mengatur arah, alignment, dan distribusi ruang antar elemen.

Container Flexbox

Untuk menggunakan Flexbox, kamu harus mengatur parent-nya sebagai flex container:

.flex-container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background-color: #1e293b;
  border-radius: 0.5rem;
}

flex-direction

Menentukan arah item flex:

/* Default: dari kiri ke kanan */
.flex-row {
  flex-direction: row;
}

/* Dari kanan ke kiri */
.flex-row-reverse {
  flex-direction: row-reverse;
}

/* Dari atas ke bawah */
.flex-column {
  flex-direction: column;
}

/* Dari bawah ke atas */
.flex-column-reverse {
  flex-direction: column-reverse;
}

justify-content

Mengatur alignment horizontal (untuk flex-direction: row) atau alignment vertikal (untuk flex-direction: column):

.flex-center {
  display: flex;
  justify-content: center; /* Pusatkan item */
}

.flex-between {
  display: flex;
  justify-content: space-between; /* Item di ujung kiri dan kanan */
}

.flex-around {
  display: flex;
  justify-content: space-around; /* Ruang di sekitar item */
}

.flex-evenly {
  display: flex;
  justify-content: space-evenly; /* Ruang merata */
}

align-items

Mengatur alignment lintas sumbu (perpendicular terhadap flex-direction):

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex-align-start {
  display: flex;
  align-items: flex-start;
}

.flex-align-end {
  display: flex;
  align-items: flex-end;
}

.flex-align-stretch {
  display: flex;
  align-items: stretch; /* Default: item meregang */
}

flex-wrap

Menentukan apakah item harus wrap ke baris berikutnya jika tidak cukup ruang:

.flex-wrap {
  display: flex;
  flex-wrap: wrap; /* Item wrap ke baris baru */
}

Item Flexbox

Kita bisa mengatur setiap item secara individual:

.item {
  background-color: #3b82f6;
  color: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
}

/* Membuat item mengambil sisa ruang */
.item-grow {
  flex-grow: 1;
}

/* Membuat item menyusut jika diperlukan */
.item-shrink {
  flex-shrink: 1;
}

/* Mengatur basis ukuran item */
.item-basis {
  flex-basis: 200px;
}

/* Shorthand: flex: grow shrink basis */
.item-flex {
  flex: 1 1 200px;
}

/* Mengubah urutan item */
.item-order-first {
  order: -1;
}

/* Alignment individual */
.item-center {
  align-self: center;
}

.item-end {
  align-self: flex-end;
}

Contoh Lengkap Flexbox

<div class="flex-container" style="display: flex; gap: 1rem; padding: 1rem; background-color: #1e293b; border-radius: 0.5rem;">
  <div style="background: #3b82f6; color: white; padding: 1rem 2rem; border-radius: 0.5rem;">Item 1</div>
  <div style="background: #10b981; color: white; padding: 1rem 2rem; border-radius: 0.5rem; flex: 1;">Item 2 (flex: 1)</div>
  <div style="background: #f59e0b; color: white; padding: 1rem 2rem; border-radius: 0.5rem;">Item 3</div>
</div>

---

Gap Property

gap adalah property yang mudah untuk menambahkan jarak antar item tanpa menggunakan margin. Bisa digunakan di Flexbox dan Grid!

/* Jarak semua item sama */
.flex-gap {
  display: flex;
  gap: 1rem;
}

/* Jarak row dan column berbeda */
.flex-gap-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

Sebelum ada gap, kita harus pakai margin di setiap item, yang sering bikin ribet. Sekarang dengan gap, semuanya jadi lebih simpel!

/* Cara lama (ribet) */
.flex-old {
  display: flex;
}

.flex-old > * + * {
  margin-left: 1rem;
}

/* Cara baru (simpel) dengan gap */
.flex-new {
  display: flex;
  gap: 1rem;
}

---

Float

float adalah property lawas untuk membuat elemen melayang ke kiri atau kanan. Dulu dipakai untuk layout, tapi sekarang sudah digantikan oleh Flexbox dan Grid.

.float-left {
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.float-right {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

/* Penting: Clear float */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Kenapa Float Tidak Disarankan untuk Layout?

• Susah di-maintain — harus pakai clearfix
• Tidak fleksibel — sulit membuat layout kompleks
• Tidak responsif — tidak adaptif terhadap ukuran layar

Gunakan Flexbox atau Grid untuk layout modern. Float masih berguna untuk membungkus teks di sekitar gambar, tapi bukan untuk layout halaman.

---

Kesimpulan

Nah, itu dia pembahasan tentang layout CSS! Mari kita recap:

Konsep	Kegunaan
display	Mengatur cara elemen ditampilkan (block, inline, inline-block, none)
position	Mengatur posisi elemen (static, relative, absolute, fixed, sticky)
Flexbox	Layout modern dengan display: flex — arah, alignment, distribusi ruang
gap	Jarak antar item tanpa margin
float	Property lawas — gunakan Flexbox/Grid sebagai gantinya

Tips Penting

• 🚀 Gunakan Flexbox untuk layout satu dimensi (row atau column)
• 📐 Gunakan CSS Grid untuk layout dua dimensi (row DAN column) — kita bahas di artikel berikutnya!
• 🧹 Gunakan gap daripada margin untuk jarak antar item
• ⚠️ Hindari float untuk layout modern

---