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>

<head>

<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>

Teks sebelum

</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="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

Comments

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...

BIMBINGAN BELAJAR BINTANG PELAJAR DI CIBUBUR MENINGKATKAN NILAI DAN MENUMBUHKAN KARAKTER ANAK SEJAK DINI

BIMBINGAN BELAJAR BINTANG PELAJAR DI CIBUBUR MENINGKATKAN NILAI DAN MENUMBUHKAN KARAKTER ANAK SEJAK DINI Bimbingan Belajar Bintang Pelajar di Cibubur: Meningkatkan Nilai dan Menumbuhkan Karakter Anak Sejak Dini 📚 Memilih lembaga bimbingan yang tepat untuk anak adalah keputusan yang sangat penting. Di tengah ketatnya persaingan akademik, orang tua membutuhkan tempat belajar yang tidak hanya mengajarkan ilmu pengetahuan, tetapi juga membangun karakter dan semangat belajar yang tinggi pada anak. 🏆 Bintang Pelajar, sebagai lembaga bimbingan yang sudah terpercaya di Cibubur, hadir untuk memberikan solusi tersebut. Kami tidak hanya berfokus pada pencapaian akademik, tetapi juga menanamkan nilai-nilai positif, kedisiplinan, serta semangat belajar mandiri pada setiap siswa. Mengapa Bimbel Ini Menjadi Pilihan Utama di Cibubur? 💡 Karena Bimbingan Pelajar Bintang Pelajar menggabungkan pendekatan akademik dan spiritual yang seimbang. Dengan pengalaman lebih...

Bimbel Online & Offline Bintang Pelajar Persiapan ananda Masuk PTN FAVORIT 2026 Untuk Wilayah Jakarta, Cibubur, Depok, Bogor, Batam, Bekasi, Tangerang, Padang, Semarang dan sekitarnya

Masuk PTN favorit seperti UI, ITB, UGM, Unpad, dan ITS adalah impian banyak siswa SMA/sederajat di seluruh Indonesia. Namun, persaingan yang ketat, perubahan sistem seleksi SNBT (dulu UTBK-SBMPTN), serta format ujian yang terus berkembang membuat siswa membutuhkan pendamping belajar yang tepat, fokus, dan berpengalaman . Di sinilah Bimbel Bintang Pelajar hadir menjadi solusi strategis bagi para orang tua dan siswa. Kini hadir dalam dua pilihan mode belajar: online dan offline , Bimbel Bintang Pelajar semakin fleksibel mendampingi siswa dari berbagai kota seperti Jakarta, Cibubur, Depok, Bogor, Batam, Bekasi, Tangerang, Padang, Semarang, dan sekitarnya untuk menghadapi tantangan masuk PTN tahun 2026. Jalur Masuk PTN Apa Saja? Panduan Lengkap Masuk Perguruan Tinggi Negeri Tahun 2025–2026 Masuk ke Perguruan Tinggi Negeri (PTN) merupakan impian banyak pelajar di Indonesia. Namun, tahukah kamu bahwa ada beberapa jalur yang bisa ditempuh untuk bisa kuliah di kampus negeri favorit? ...

Ngaji di Jonggol

Search This Blog