📘 Materi: display: inline-grid di CSS
✅ 1. Pengertian inline-grid
inline-grid adalah sebuah nilai dari properti display di CSS yang membuat elemen menjadi grid container dan tetap berperilaku seperti elemen inline.
Artinya:
Elemen tetap mengikuti alur dokumen (tidak mengambil seluruh baris seperti block),
Tetapi anak-anaknya bisa diatur dalam baris dan kolom menggunakan Grid Layout.
🔄 2. Perbedaan grid vs inline-grid
Properti grid inline-grid
Aliran dokumen Block (penuh satu baris) Inline (mengalir di sebelah elemen lain)
Layout anak Grid Grid
Kegunaan Umum untuk kontainer besar Untuk komponen kecil atau inline grid layout
🧱 3. Sintaks Dasar
.container {
display: inline-grid;
grid-template-columns: 100px 100px;
grid-template-rows: auto;
gap: 10px;
}
📦 4. Contoh HTML + CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.wrapper {
font-family: Arial;
}
.container {
display: inline-grid;
grid-template-columns: 100px 100px;
gap: 10px;
border: 2px solid blue;
padding: 10px;
}
.container div {
background-color: lightcoral;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
Teks sebelum
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
teks sesudah
</div>
</body>
</html>
Hasil:
Elemen grid (.container) berada di tengah kalimat ("Teks sebelum" dan "teks sesudah").
Anak-anak grid ditata dalam 2 kolom dengan gap: 10px.
🧪 5. Studi Kasus Mini: "Badge Grid"
<style>
.badge {
display: inline-grid;
grid-template-columns: auto auto;
background: #ffc107;
padding: 5px 10px;
border-radius: 5px;
font-weight: bold;
gap: 5px;
}
.badge .icon {
background: red;
color: white;
padding: 2px 5px;
border-radius: 3px;
}
.badge .text {
color: black;
}
</style>
<p>
Status:
<span class="badge">
<span class="icon">!</span>
<span class="text">Peringatan</span>
</span>
</p>
Output:
Badge dengan icon dan teks dalam satu baris tetapi diatur pakai grid.
-----------------
Dapatkan E-book HTML, CSS, Jarkom, Digital Marketing, Python, Excel, dan Bootstrap
Source Code dan E-book belajar pemrograman Python: http://lynk.id/sutrisnosukarno/dd5lvqeyerl2
File Latihan dan E-Book Ms Excel: http://lynk.id/sutrisnosukarno/1yr5w0qqmg5o
Source Code File Latihan, Tutorial HTML, CSS, Bootstrap: http://lynk.id/sutrisnosukarno/ong9lyrkq43p
Support kami dengan cara like, komen dan subscribe
Untuk belajar ilmu komputer bisa wa ke admin 0821-2038-8854
#komputer #belajar #ilmukomputer #html #css #bootstrap #flowchart #analisis #tutorialkomputer #javascript #php #jaringan #mikrotik #capcut #video #canva #excel #msoffice
Tidak ada komentar:
Posting Komentar