TUTORIAL WEB PROGRAMMING - BELAJAR DAN PRAKTEK INLINE GRID DI HTML CSS - TEMPAT BELAJAR WEB PROGRAMMING DI CILEUNGSI, CIBUBUR, SETU, GUNUNG PUTRI

  

📘 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