Tutorial CSS Jumlah Item Ganjil dalam Grid Genap, Item Terakhir Tetap Dapat Terpusat

Selasa, 03 Maret 2026

Pernah bikin grid 1fr 1fr dengan tiga item, lalu item ketiga turun ke baris kedua dan menempel kiri? Nah, di tutorial ini kita bikin item yang sendirian itu lebarnya sama persis dengan satu kolom (setengah container) dan berada di tengah, bukan di kiri. Cocok buat layout kartu produk atau galeri atau item yang jumlahnya ganjil di grid (kolom) genap.

Masalah default 📌

Tanpa trik, CSS grid biasa akan menaruh item ke-3 di kolom pertama baris kedua. Kodenya seperti ini:

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

Item 3 akan berada di kiri bawah. Tapi kita ingin dia tampil proporsional dan terpusat.

Solusi: bentang + lebar presisi + justify-self

Langkah‑langkahnya:

grid-column: 1 / -1, buat item ketiga membentang dari kolom pertama hingga terakhir (jadi area selebar 2 kolom).
width: calc((100% - 12px) / 2), hitung lebar satu kolom. 100% di sini adalah lebar area bentangan (dua kolom + gap di antaranya). Kurangi gap, lalu bagi dua
justify-self: center, tempatkan item di tengah area bentangan.
box-sizing: border-box biar padding tidak mengacak lebar.

Kode final (lengkap)

<style>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.item {
  background: #3b82f6;
  color: white;
  padding: 24px 12px;
  border-radius: 16px;
  text-align: center;
  box-sizing: border-box;
}

/* item ketiga */
.item:last-child {
  grid-column: 1 / -1;             /* bentang dua kolom */
  width: calc((100% - 12px) / 2);  /* lebar = satu kolom */
  justify-self: center;            /* tengah */ 
  background: #10b981;             /* biar keliatan beda */ 
}
</style>

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3 (selebar kolom & terpusat)</div>
</div>

Penjelasan tambahan: 💡
calc((100% - 12px) / 2) → karena gap: 12px ada di antara kolom, maka total lebar dua kolom adalah 100% - 12px. Setengahnya adalah lebar satu kolom. Angka 12px harus sama dengan nilai gap yang kamu pakai.

🖥️ Preview langsung (dibuat selebar 414px/ukuran HP umum)

Grid 2 kolom + item terakhir selebar kolom & terpusat

3 (sama lebar & terpusat)

✔️ Item hijau tepat selebar item biru, dan berada di tengah baris kedua.

Bagaimana jika gap berbeda?

Tinggal ganti angka di dalam calc().
Misal gap: 16px → width: calc((100% - 16px) / 2).
Untuk grid dengan 3 kolom? Bisa pakai rumus serupa: calc((100% - (n-1)*gap) / n).

Kesimpulan

Dengan kombinasi grid-column + width: calc(...) + justify-self, kita bisa membuat item ganjil di grid rata kiri-kanan dan tetap terlihat seimbang. Teknik ini ringan, tanpa flexbox atau posisi absolute. Selamat mencoba!

Bagikan di

Pages