CSS Academy · Pelajaran

Line Bernama dan Area Grid Bernama

Beri nama pada line dan area grid agar penempatan grid lebih mudah dibaca dan dipelihara.

Line Bernama dan Area Grid Bernama adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Menamai Garis Grid

Garis grid dapat diberi nama di dalam tanda kurung siku pada grid-template-columns dan grid-template-rows. Garis bernama membuat kode penempatan lebih mudah dibaca daripada angka mentah.

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

Menempatkan Item dengan Garis Bernama

Gunakan garis bernama dalam grid-column dan grid-row agar penempatan lebih mudah dibaca:

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

Nama Garis dengan -start dan -end

Saat area bernama ditentukan dengan grid-template-areas, CSS secara otomatis membuat garis bernama dengan akhiran -start dan -end yang dapat Anda jadikan referensi.

  <div class="layout">
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
  </div>

Garis Bernama Berulang

Saat menggunakan repeat(), Anda dapat menyertakan nama di dalam pola yang diulang. Garis akan mendapatkan akhiran bernomor untuk membedakannya.

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

Membentangkan Garis Bernama

Gunakan garis bernama dengan span untuk membentangkan sejumlah jalur bernama tertentu:

  <div class="grid">
    <div class="header">Header spans 3</div>
    <div>A</div><div>B</div><div>C</div>
  </div>

Ringkasan Area Bernama

Area bernama (melalui grid-template-areas) adalah pendekatan yang paling mudah dibaca untuk memosisikan item:

  <div class="page">
    <header>Header</header>
    <div class="sidebar">Sidebar</div>
    <div class="main">Main</div>
    <div class="footer">Footer</div>
  </div>

Garis Bernama untuk Tata Letak Kompleks

Garis bernama sangat berguna untuk tata letak editorial kompleks dengan banyak elemen yang membentang:

  <div class="magazine">
    <div class="full-bleed">Full bleed banner</div>
    <div class="article">Article content</div>
  </div>

Menggabungkan Nama dan Angka

Garis bernama dan nomor garis dapat dicampur dengan bebas dalam grid yang sama:

  <div class="layout"><div class="item">Item</div></div>

Beberapa Nama pada Satu Garis

Satu garis dapat memiliki beberapa nama—berguna ketika sebuah garis berfungsi sebagai akhir satu area sekaligus awal area lainnya:

  <div class="grid">
    <div>Sidebar</div>
    <div>Content</div>
  </div>

Garis Bernama Implisit dari Area

Jika Anda menentukan area bernama "main", garis main-start (kolom dan baris) serta main-end akan dibuat secara otomatis, sehingga Anda dapat menggunakannya untuk item yang saling bertumpuk.

Menelusuri Kesalahan Garis Bernama di DevTools

DevTools Chrome dan Firefox dapat menampilkan garis grid bernama sebagai label pada hamparan. Aktifkan label garis di panel Tata Letak untuk memastikan nama-namanya benar.

Pemeriksaan Singkat

Saat Anda menentukan area grid bernama "sidebar" dalam grid-template-areas, nama garis apa yang dibuat secara otomatis?

Ringkasan

Beri nama garis grid di dalam tanda kurung siku pada definisi jalur agar penempatan mudah dibaca. Area bernama secara otomatis menghasilkan nama garis -start dan -end. Satu garis dapat memiliki beberapa nama. Garis bernama dapat digabungkan dengan span dan angka secara bebas. Gunakan DevTools untuk memvisualisasikan garis bernama sebagai hamparan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Line Bernama dan Area Grid Bernama” gratis?

Ya — teks lengkap “Line Bernama dan Area Grid Bernama” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Line Bernama dan Area Grid Bernama”?

Beri nama pada line dan area grid agar penempatan grid lebih mudah dibaca dan dipelihara. Kamu berlatih CSS 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 CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS 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 1 dari 4.

Berapa lama pelajaran “Line Bernama dan Area Grid Bernama” 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 CSS Academy ini?

Ya. Setiap pelajaran CSS 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

Line Bernama dan Area Grid Bernama
Auto-fit dan Auto-fill dengan minmax
Grid Implisit dan Grid-Auto-Flow
Subgrid untuk Konten Bertingkat yang Sejajar

← Kembali ke CSS Academy