Belajar dan Praktek Inline Grid di HTML & CSS - Rafly

Info selanjutnya Hub :

Grid adalah salah satu teknik layout paling powerful di CSS. Tapi tahukah kamu kalau selain display: grid, ada juga yang namanya inline-grid? Yuk kita bahas dan praktek bareng!

Apa Itu Inline Grid?

Secara sederhana:

display: grid ➜ membuat elemen jadi blok dan kontennya diatur dalam grid.
display: inline-grid ➜ membuat elemen jadi inline (sebaris dengan elemen lain), tapi tetap menggunakan sistem grid di dalamnya.

Dengan kata lain, inline-grid adalah gabungan dari dua sifat:

❗ Luarannya seperti elemen inline, tapi dalamnya tetap pakai layout grid.

Perbedaan Grid vs inline Grid

Properti	`grid`	`inline-grid`
Perilaku luar	Seperti blok	Seperti inline
Perilaku dalam	Grid layout	Grid layout
Ukuran default	Lebar penuh	Hanya selebar konten

Contoh HTML + CSS

Struktur HTML

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

CSS Grid vs Inline-Grid

.container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
}

.box {
  background-color: orange;
  padding: 20px;
  text-align: center;
}

Hasilnya?

Elemen .container tidak memenuhi lebar penuh halaman.
Tetap mengatur anak-anaknya (box 1-2-3) dalam grid.
Elemen .container bisa berjejer dengan elemen lain seperti elemen inline biasa.

Contoh Penggunaan Inline-Grid

Contoh 1: Tombol dengan grid icon + teks

<button class="btn-grid">
  <span>🛒</span>
  <span>Beli Sekarang</span>
</button>

.btn-grid {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 5px;
  align-items: center;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}

Hasil: Ikon dan teks akan tampil berjejer dalam satu baris, tapi tetap rapi dan sejajar berkat sistem grid.

Kapan Pakai inline Grid?

Gunakan inline-grid saat kamu ingin:

Elemen tetap tampil sebaris dengan teks atau elemen lain, tapi…
Kamu tetap ingin mengatur konten dalam elemen tersebut dengan grid.

Misalnya:

Tombol dengan 2 kolom
Badge kecil dengan layout grid
Kotak kecil yang harus sejajar dengan teks lain tapi punya layout kompleks di dalamnya

Latihan Mandiri

Coba ubah display: inline-grid jadi display: grid di contoh tadi, dan lihat perbedaannya. Perhatikan:

Apakah elemennya masih sebaris dengan elemen lain?
Apakah ukurannya berubah?

inline-grid adalah fitur kecil tapi berguna dari CSS Grid. Ia cocok digunakan saat kamu butuh kontrol layout internal, tapi tetap ingin elemen tersebut tidak mengambil seluruh lebar seperti elemen blok biasa.

Dengan latihan dan eksperimen kecil-kecilan, kamu akan makin paham cara kerja grid dan inline-grid.