Grid Tersirat dan Grid-Auto-Flow
Fahami cara CSS Grid mengendalikan item di luar trek eksplisit dengan baris dan lajur tersirat.
Grid Tersirat dan Grid-Auto-Flow ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 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.
Grid Eksplisit berbanding Grid Tersirat
Grid eksplisit ditakrifkan oleh grid-template-columns dan grid-template-rows. Apabila item melimpah melebihi trek yang ditakrifkan ini, pelayar mencipta trek tersirat secara automatik.
grid-auto-rows
Menentukan saiz trek baris yang dicipta secara tersirat. Tanpanya, baris tersirat akan disesuaikan mengikut kandungannya (auto).
<div class="gallery">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>grid-auto-rows dengan minmax
Jadikan baris tersirat sekurang-kurangnya setinggi nilai tertentu tetapi masih boleh mengembang:
<div class="feed">
<div>1</div><div>2</div><div>3</div>
</div>grid-auto-columns
Menentukan saiz trek lajur tersirat apabila item ditempatkan di luar julat lajur eksplisit:
<div class="timeline">
<div>Event 1</div><div>Event 2</div>
</div>grid-auto-flow
Mengawal cara algoritma penempatan automatik menempatkan item:
row(lalai) — tempatkan dalam baris dan tambah baris baharu apabila diperlukancolumn— tempatkan dalam lajur dan tambah lajur baharurow dense— isi ruang kosong secara agresif dengan mengundur semulacolumn dense— pengisian padat dalam arah lajur
grid-auto-flow: dense
dense menyebabkan algoritma cuba mengisi ruang kosong yang ditinggalkan oleh item yang merentang besar. Ini boleh menyebabkan item muncul dalam susunan yang tidak mengikut urutan asal.
<div class="masonry">
<div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
</div>Pola Lajur Aliran Automatik
Jalur kad dengan penatalan mendatar, yang lajurnya berkembang mengikut keperluan:
<div class="strip">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>Pembungkusan Padat untuk Galeri
Galeri foto dengan saiz bercampur yang mengisi ruang kosong:
<div class="gallery">
<div class="wide">Wide</div>
<div class="tall">Tall</div>
<div>3</div><div>4</div>
</div>Grid Tersirat dan Kawasan Bernama
Kawasan bernama hanya digunakan pada grid eksplisit. Item yang ditempatkan dalam grid tersirat tidak boleh menggunakan penempatan kawasan bernama secara langsung — item tersebut memerlukan penempatan menggunakan nombor garis atau span.
Memvisualkan Grid Tersirat
Dalam Chrome DevTools, lapisan susun atur menunjukkan kedua-dua garis grid eksplisit (pejal) dan tersirat (putus-putus). Ini membantu Anda memahami lokasi item yang ditempatkan secara automatik.
Mengawal Saiz Tersirat bagi Setiap Item
Item yang merentang berbilang baris dalam grid tersirat memerlukan grid-auto-rows untuk menetapkan saiz dengan betul. Tanpanya, baris tersirat akan disesuaikan mengikut kandungan, yang boleh menghasilkan susun atur tidak sekata.
Semakan Pantas
Apakah yang dilakukan oleh grid-auto-flow: row dense?
Ulang Kaji
Grid tersirat memanjangkan grid eksplisit dengan trek yang dicipta secara automatik. grid-auto-rows/columns mengawal saiznya; minmax() menjadikannya fleksibel. grid-auto-flow menentukan arah penempatan. Pembungkusan dense mengisi ruang kosong secara agresif — berguna untuk susun atur seperti susunan batu bata tetapi mungkin mengganggu susunan visual.
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
Soalan Lazim
Adakah pelajaran “Grid Tersirat dan Grid-Auto-Flow” percuma?
Ya — teks penuh “Grid Tersirat dan Grid-Auto-Flow” 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 “Grid Tersirat dan Grid-Auto-Flow”?
Fahami cara CSS Grid mengendalikan item di luar trek eksplisit dengan baris dan lajur tersirat. 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 3 daripada 4.
Berapa lamakah pelajaran “Grid Tersirat dan Grid-Auto-Flow” 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
- Garis Bernama dan Kawasan Grid Bernama
- Auto-fit dan Auto-fill dengan minmax
- Grid Tersirat dan Grid-Auto-Flow
- Subgrid untuk Kandungan Bersarang yang Selaras