CSS Academy · Pelajaran

Paparan Grid dan Lajur Baris Templat

Dayakan CSS Grid dan takrifkan trek lajur serta baris menggunakan grid-template-columns dan rows.

Pelajaran 1 daripada 413 langkah

Paparan Grid dan Lajur Baris Templat ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Mengaktifkan CSS Grid

CSS Grid diaktifkan dengan display: grid pada bekas. Anak langsungnya secara automatik menjadi item grid yang ditempatkan ke dalam sel.

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>

grid-template-columns

grid-template-columns mentakrifkan bilangan dan saiz lajur. Setiap nilai menghasilkan satu trek lajur.

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>

grid-template-rows

grid-template-rows mentakrifkan trek baris yang jelas. Item yang melebihi baris yang ditakrifkan akan menghasilkan baris tersirat.

<div class="layout" style="min-height:220px;">
  <div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
  <div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>

Trek Lajur dan Baris

Setiap nilai dalam grid-template-columns atau grid-template-rows menghasilkan satu trek. Trek boleh menggunakan mana-mana unit saiz:

Tetap: 200px, 10rem
Fleksibel: 1fr
Berdasarkan kandungan: auto, min-content, max-content

Unit fr

fr (unit pecahan) mengagihkan ruang yang tersedia selepas saiz tetap ditolak. 1fr 2fr menghasilkan lajur dalam nisbah 1:2.

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>

auto dalam Trek

auto dalam trek menentukan saiz yang sepadan dengan kandungan. Sebagai lajur, saiznya mengikut keperluan minimum sel yang paling lebar; sebagai baris, saiznya mengikut sel yang paling tinggi.

<div class="sidebar-layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>

Contoh Susun Atur Halaman

Susun atur halaman tiga baris yang lazim, dengan pengepala, kandungan utama dan pengaki:

<div class="page">
  <header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
  <footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>

Singkatan grid-template

grid-template menggabungkan baris dan lajur:

<div class="grid" style="display:grid;min-height:180px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>

Memeriksa Grid dalam DevTools

DevTools Chrome dan Firefox boleh menindihkan garis trek grid pada halaman. Klik lencana grid dalam panel Elemen untuk memvisualisasikan lajur, baris, jarak dan kawasan bernama.

Pemilihan Grid berbanding Flexbox

Gunakan Grid apabila anda perlu mengawal baris dan lajur secara serentak. Gunakan Flexbox untuk susun atur satu dimensi (barisan item atau lajur item). Banyak susun atur menggunakan kedua-duanya.

Nombor Garis

Grid menomborkan garisnya secara automatik bermula daripada 1. Anda boleh reference nombor ini untuk meletakkan item secara manual. Garis lajur bernombor dari 1 hingga n+1, dengan n ialah bilangan lajur.

<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>

Semakan Pantas

Apakah yang dicipta oleh grid-template-columns: 200px 1fr 2fr?

Jawab dalam pelajaran interaktif

Imbas Kembali

display: grid mencipta bekas grid. grid-template-columns dan grid-template-rows mentakrifkan trek. Unit fr mengagihkan ruang yang berbaki secara berkadar. auto menentukan saiz berdasarkan kandungan. Grid sesuai untuk mengawal susun atur dua dimensi.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Paparan Grid dan Lajur Baris Templat” percuma?

Ya — teks penuh “Paparan Grid dan Lajur Baris Templat” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Paparan Grid dan Lajur Baris Templat”?

Dayakan CSS Grid dan takrifkan trek lajur serta baris menggunakan grid-template-columns dan rows. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Paparan Grid dan Lajur Baris Templat” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy