Frontend Academy · Pelajaran

Dasar Display: block, inline, flex, grid

Beralih di antara nilai display dan lihat bagaimana block, inline, flex, serta grid menata konten dengan cara yang berbeda.

Dasar Display: block, inline, flex, grid adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Properti display

Properti display adalah properti CSS terpenting untuk tata letak. Properti ini mengatur cara elemen berpartisipasi dalam alur tata letak dan cara anak-anaknya disusun. Nilai yang paling sering digunakan: block, inline, inline-block, flex, grid, dan none.

display: block

Elemen blok menggunakan lebar penuh kontainernya dan dimulai pada baris baru. Contoh: <div>, <p>, <h1>. Anda dapat menetapkan lebar, tinggi, margin, dan padding pada elemen blok.

.card {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

display: inline

Elemen sebaris mengalir di dalam teks — elemen ini tidak dimulai pada baris baru. Contoh: <span>, <a>, <strong>. Lebar, tinggi, dan margin vertikal tidak berpengaruh pada elemen sebaris.

span { display: inline; color: blue; }
/* Setting width: 200px on a span does nothing */

display: inline-block

inline-block menggabungkan keduanya: elemen mengalir secara sebaris (seperti teks), tetapi menerima lebar, tinggi, dan margin vertikal (seperti blok). Berguna untuk tombol dan lencana yang harus berada dalam satu baris teks.

.badge {
  display: inline-block;
  padding: 4px 8px;
  background: #e2e8f0;
  border-radius: 4px;
  font-size: 0.75rem;
}

display: none

display: none menghapus elemen sepenuhnya dari tata letak — elemen tersebut tidak menggunakan ruang. Gunakan visibility: hidden untuk menyembunyikannya sekaligus mempertahankan ruang yang ditempatinya.

Flexbox — Tata Letak Satu Dimensi

display: flex mengubah elemen menjadi kontainer fleksibel. Anak-anak langsungnya menjadi item fleksibel yang disusun dalam baris (bawaan) atau kolom. Flex sangat baik untuk membagikan ruang dan meratakan item.

.nav {
  display: flex;
  justify-content: space-between; /* horizontal */
  align-items: center;            /* vertical */
  gap: 16px;
}

Properti Utama Flexbox

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

CSS Grid — Tata Letak Dua Dimensi

display: grid mengubah elemen menjadi kontainer kisi. Anda menentukan baris dan kolom dengan grid-template-columns dan grid-template-rows. Grid ideal untuk tata letak halaman dan kisi kartu.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Unit fr

Unit fr (pecahan) membagikan ruang yang tersedia. grid-template-columns: 1fr 2fr 1fr membuat tiga kolom, dengan kolom tengah mendapatkan ruang dua kali lebih banyak daripada kolom lainnya.

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
  gap: 32px;
}

Memilih antara Flex dan Grid

Gunakan Flexbox untuk tata letak satu dimensi (baris tombol, tumpukan kartu). Gunakan Grid untuk tata letak dua dimensi (kerangka halaman, galeri foto dengan baris dan kolom yang ditentukan secara jelas). Keduanya dapat digunakan bersama dalam halaman yang sama.

display: none vs visibility: hidden

display: none: menghapus elemen dari tata letak dan membuatnya tidak dapat diakses oleh pembaca layar. visibility: hidden: tidak terlihat, tetapi tetap menggunakan ruang dan tetap berada dalam pohon aksesibilitas. opacity: 0: tidak terlihat, tetapi tetap menggunakan ruang dan dapat diakses.

Pemeriksaan Singkat

Anda perlu menata kisi kartu responsif dengan beberapa baris dan kolom. Nilai display mana yang paling tepat sebagai titik awal?

Ringkasan: Nilai Display

block menggunakan lebar penuh. inline mengalir bersama teks. inline-block menggabungkan keduanya. flex menyusun anak dalam satu dimensi. grid menyusun anak dalam dua dimensi. none menghapus elemen dari tata letak. Kuasai semua ini dan Anda dapat mengendalikan setiap tata letak di web.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar Display: block, inline, flex, grid” gratis?

Ya — teks lengkap “Dasar Display: block, inline, flex, grid” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Dasar Display: block, inline, flex, grid”?

Beralih di antara nilai display dan lihat bagaimana block, inline, flex, serta grid menata konten dengan cara yang berbeda. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Dasar Display: block, inline, flex, grid” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Pemilih dan Kaskade
Warna, Tipografi, dan Model Kotak
Dasar Display: block, inline, flex, grid
Pemosisian: relative, absolute, fixed, sticky

← Kembali ke Frontend Academy