Skip to main content

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 

tempat kursus privat komputer web programming terdekat



Labels:

Comments

Post a Comment

Popular posts from this blog

Daftar Cabang Bimbingan Belajar / Bimbel Bintang Pelajar di Jakarta, Bogor, Bekasi, Tangerang, Batam, Semarang dan Sekitarnya

Bimbingan Belajar (Bimbel) Bintang Pelajar adalah salah satu lembaga pendidikan nonformal terbaik di Indonesia yang telah membantu ribuan siswa mencapai prestasi akademik gemilang. Dikenal dengan pendekatan Islami, sistem pembelajaran intensif , dan pengajar profesional , Bintang Pelajar menjadi pilihan utama untuk bimbingan masuk sekolah dan perguruan tinggi unggulan. Dalam artikel ini, kami akan mengulas daftar cabang resmi Bimbel Bintang Pelajar di beberapa kota besar seperti Jakarta, Bogor, Bekasi, Tangerang, Batam, Semarang, dan sekitarnya, serta menjelaskan layanan unggulan yang ditawarkan di masing-masing cabang. Keunggulan Bintang Pelajar Sebelum menyelami daftar cabangnya, berikut adalah alasan mengapa orang tua dan siswa mempercayai Bintang Pelajar: Pendekatan Islami : Memadukan ilmu dunia dan akhlak Islami. Tutor Berpengalaman : Tim pengajar terdiri dari alumni perguruan tinggi ternama. Program Spesifik : Tersedia bimbel untuk SNBT, ...
Post a Comment
Read more

Bimbel Matematika Privat di Rumah – Solusi Belajar Terbaik di Cileungsi & Jatikarya Cibubur

Bimbel Matematika Privat di Rumah – Solusi Belajar Terbaik di Cileungsi & Jatikarya Cibubur Apakah anak Anda sering merasa kesulitan memahami pelajaran Matematika di sekolah? Atau sudah mengikuti les, tapi belum juga terlihat kemajuan yang signifikan? Kini Anda tidak perlu khawatir, karena Rumah Belajar Privat YMII hadir memberikan solusi terbaik melalui bimbel Matematika privat di rumah yang tersedia di wilayah Cileungsi dan Jatikarya Cibubur . Kenapa Harus Memilih Bimbel Matematika Privat di Rumah? Di Rumah Belajar Privat YMII, kami memahami bahwa setiap anak memiliki cara belajar yang berbeda. Oleh karena itu, kami menyediakan layanan bimbel Matematika secara privat , yang bisa dilakukan di rumah siswa ataupun di tempat les privat kami . Pendekatan kami disesuaikan dengan karakter dan kebutuhan belajar masing-masing anak. Berikut keunggulan layanan kami: ✅ Les privat langsung di rumah atau di tempat kami ✅ Metode belajar disesuaikan dengan karakter anak ✅ Tutor...
Post a Comment
Read more

BANTU ANANDA UNTUK SIAP MASUK SMANU MH THAMRIN BERSAMA PROGRAM BELAJAR KHUSUS DARI BINTANG PELAJAR

Masuk ke SMANU MH Thamrin bukanlah hal yang mudah. Sekolah unggulan di DKI Jakarta ini memiliki standar seleksi yang sangat ketat, mencakup tes akademik, logika, hingga wawancara. Bagi para orang tua yang ingin memberikan dukungan terbaik untuk ananda, kini hadir Program Belajar Khusus dari Bintang Pelajar, solusi efektif untuk menyiapkan siswa menghadapi tantangan seleksi masuk SMANU MH Thamrin. Mengapa SMANU MH Thamrin Begitu Diidamkan? SMANU MH Thamrin dikenal sebagai sekolah menengah atas negeri dengan kurikulum yang sangat kuat di bidang sains dan matematika. Dikelola langsung oleh Dinas Pendidikan DKI Jakarta, sekolah ini dirancang untuk mencetak generasi muda yang unggul dan siap berkompetisi di level nasional maupun internasional. Keunggulan sekolah ini di antaranya: Kurikulum sains dan matematika yang diperkuat. Program pembinaan olimpiade sains secara intensif. Sarana belajar yang lengkap dan kondusif. Lulusan yang banyak diterima di univer...
Post a Comment
Read more