Baris Grid dan Peletakan Automatik
Tentukan baris nyata dengan grid-rows-*, kawal peletakan automatik dengan grid-flow-*, dan biarkan pelayar meletakkan item secara bijak.
Baris Grid dan Peletakan Automatik ialah pelajaran Tailwind 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 Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Baris Grid Eksplisit berbanding Implisit
Apabila anda meletakkan item dalam grid, CSS Grid mencipta baris melalui dua cara: secara eksplisit (anda mentakrifkannya dengan grid-rows-*) atau secara implisit (pelayar menjana baris tersebut secara automatik apabila item melimpah). Memahami perbezaan ini membantu anda mengawal ketinggian dengan tepat apabila diperlukan, atau membiarkan pelayar menguruskannya apabila kandungan anda berubah-ubah.
<!-- Explicit 3-row grid -->
<div class="grid grid-rows-3 grid-cols-2 gap-4 h-48">
<div class="bg-blue-100 p-3">Row 1, Col 1</div>
<div class="bg-blue-100 p-3">Row 1, Col 2</div>
<div class="bg-blue-200 p-3">Row 2, Col 1</div>
<div class="bg-blue-200 p-3">Row 2, Col 2</div>
<div class="bg-blue-300 p-3">Row 3, Col 1</div>
<div class="bg-blue-300 p-3">Row 3, Col 2</div>
</div>Utiliti grid-rows-N
Tailwind menyediakan grid-rows-1 hingga grid-rows-6 untuk mentakrifkan trek baris eksplisit. Di sebalik tabir, grid-rows-3 dikompilkan kepada grid-template-rows: repeat(3, minmax(0, 1fr)). Baris ini berkongsi ketinggian yang tersedia dalam bekas secara sama rata. Ciri ini paling berguna apabila bekas mempunyai ketinggian tetap atau berasaskan peratusan.
<!-- 4 equal rows in a fixed-height dashboard -->
<div class="grid grid-rows-4 gap-2 h-64">
<div class="bg-emerald-100 p-2 rounded">Section 1</div>
<div class="bg-emerald-200 p-2 rounded">Section 2</div>
<div class="bg-emerald-300 p-2 rounded">Section 3</div>
<div class="bg-emerald-400 p-2 rounded">Section 4</div>
</div>Baris Implisit dan grid-auto-rows
Apabila terdapat lebih banyak item daripada yang boleh ditampung oleh baris eksplisit anda, pelayar mencipta baris implisit. Secara lalai, baris implisit ini disesuaikan ukurannya agar muat dengan kandungannya. Anda boleh mengawal ketinggiannya menggunakan CSS tersuai atau sintaks nilai arbitrari Tailwind, contohnya dengan menetapkan ketinggian baris melalui gaya sebaris atau menggunakan utiliti auto-rows-* yang tersedia dalam versi Tailwind yang lebih baharu.
<!-- Implicit rows kick in for items beyond grid-rows-2 -->
<div class="grid grid-cols-2 grid-rows-2 gap-3" style="grid-auto-rows: 80px">
<div class="bg-purple-100 p-3">Explicit row 1</div>
<div class="bg-purple-100 p-3">Explicit row 1</div>
<div class="bg-purple-200 p-3">Explicit row 2</div>
<div class="bg-purple-200 p-3">Explicit row 2</div>
<!-- These create implicit rows at 80px height -->
<div class="bg-purple-300 p-3">Implicit row</div>
<div class="bg-purple-300 p-3">Implicit row</div>
</div>Memahami grid-flow
Sifat grid-flow mengawal algoritma peletakan automatik — susunan item mengisi sel grid yang tersedia. grid-flow-row Tailwind (lalai) mengisi dari kiri ke kanan merentasi setiap baris sebelum bergerak ke bawah. grid-flow-col mengisi dari atas ke bawah dalam setiap lajur sebelum bergerak ke kanan. Ini seperti perbezaan antara membaca buku dari kiri ke kanan dengan membaca akhbar mengikut lajur.
<!-- Row flow (default): items fill horizontally -->
<div class="grid grid-cols-3 grid-flow-row gap-3">
<div class="bg-sky-100 p-3">1</div>
<div class="bg-sky-100 p-3">2</div>
<div class="bg-sky-100 p-3">3</div>
<div class="bg-sky-100 p-3">4</div>
</div>grid-flow-col untuk Susun Atur Mengutamakan Lajur
Menggunakan grid-flow-col menukar algoritma peletakan automatik supaya lajur diisi dahulu. Apabila digabungkan dengan grid-rows-* untuk mengehadkan ketinggian setiap lajur, ciri ini menghasilkan aliran kad menegak gaya akhbar atau Pinterest. Item diisi ke bawah dalam lajur pertama, kemudian melimpah ke lajur seterusnya secara automatik.
<!-- Column-first flow: items fill downward in each column -->
<div class="grid grid-rows-3 grid-flow-col gap-3">
<div class="bg-rose-100 p-3">Col 1, Row 1</div>
<div class="bg-rose-100 p-3">Col 1, Row 2</div>
<div class="bg-rose-100 p-3">Col 1, Row 3</div>
<div class="bg-rose-200 p-3">Col 2, Row 1</div>
<div class="bg-rose-200 p-3">Col 2, Row 2</div>
<div class="bg-rose-200 p-3">Col 2, Row 3</div>
</div>Peletakan Automatik Padat
grid-flow-dense mengaktifkan algoritma pembungkusan padat, yang membolehkan pelayar mengisi ruang kosong yang ditinggalkan oleh item yang merentang. Tanpa pembungkusan padat, grid dengan item yang merentang meninggalkan jurang kerana peletakan mengikut susunan yang ketat. Pembungkusan padat sesuai untuk galeri imej apabila anda mahukan mozek yang rapat tanpa ruang yang terbuang.
<!-- Dense packing fills holes left by spanning items -->
<div class="grid grid-cols-3 grid-flow-dense gap-3">
<div class="col-span-2 bg-amber-200 p-3">Wide (spans 2)</div>
<div class="bg-amber-100 p-3">B</div>
<div class="bg-amber-100 p-3">C</div>
<!-- D would normally go after C, but dense fills the hole before B -->
<div class="bg-amber-100 p-3">D</div>
</div>Aliran Baris dan Lajur Padat Bersama
Anda boleh menggabungkan arah aliran dan kepadatan dengan grid-flow-row-dense atau grid-flow-col-dense. Varian row-dense mengisi baris dahulu tetapi mengisi semula sebarang ruang kosong, manakala col-dense mengisi lajur dahulu dan turut mengisi ruang kosong. Utiliti ini menjadi pilihan utama untuk susun atur gaya galeri dengan saiz kad yang bercampur apabila estetika lebih penting daripada susunan yang ketat.
<!-- Row-dense: fills rows first, packs holes -->
<div class="grid grid-cols-4 grid-flow-row-dense gap-3">
<div class="col-span-3 bg-teal-300 p-3">Spans 3</div>
<div class="bg-teal-100 p-3">A</div>
<div class="bg-teal-100 p-3">B</div>
<div class="col-span-2 bg-teal-200 p-3">Spans 2</div>
<div class="bg-teal-100 p-3">C</div>
</div>Menggabungkan Baris Grid dengan Lajur
Dengan mentakrifkan grid-rows-* dan grid-cols-* bersama-sama, anda memperoleh templat grid yang ditentukan sepenuhnya, seperti hamparan elektronik. Setiap sel dalam templat ini mempunyai kedudukan yang boleh dijangka. Pendekatan ini sangat sesuai untuk reka letak papan pemuka apabila anda mengetahui dengan tepat jumlah bahagian yang diperlukan dan mahu mengawal ketinggian serta lebar setiap bahagian dengan teliti.
<!-- 3-col x 2-row dashboard shell -->
<div class="grid grid-cols-3 grid-rows-2 gap-4 h-64">
<div class="col-span-3 bg-slate-700 text-white p-3 rounded">Header</div>
<div class="bg-slate-100 p-3 rounded">Widget 1</div>
<div class="bg-slate-100 p-3 rounded">Widget 2</div>
<div class="bg-slate-100 p-3 rounded">Widget 3</div>
</div>Ketinggian Baris Tersuai dengan Nilai Arbitrari
Sintaks nilai arbitrari Tailwind membolehkan anda menulis sebarang nilai CSS di dalam kurungan siku. Untuk baris grid, anda boleh menggunakan grid-rows-[100px_1fr_auto] untuk mentakrifkan pengepala tetap setinggi 100px, kawasan kandungan fleksibel dan pengaki bersaiz automatik. Cara ini lebih ringkas berbanding menulis gaya sebaris serta mendapat manfaat daripada penyusunan JIT ke dalam CSS pengeluaran anda.
<!-- Custom row heights: 60px header, flexible main, auto footer -->
<div class="grid h-screen" style="grid-template-rows: 60px 1fr auto">
<header class="bg-gray-900 text-white flex items-center px-6">
App Header
</header>
<main class="bg-gray-50 p-6 overflow-y-auto">
Main scrollable content
</main>
<footer class="bg-gray-800 text-white p-4 text-center">
Footer
</footer>
</div>Baris Automatik dalam Amalan
Semasa membina grid kad dengan kandungan dinamik, anda biasanya mahukan ketinggian minimum baris yang seragam supaya kad yang pendek tidak kelihatan terlalu kecil. Dengan menggunakan grid-auto-rows melalui gaya sebaris atau varian arbitrari JIT Tailwind [grid-auto-rows:200px], anda boleh memastikan setiap baris sekurang-kurangnya setinggi yang diperlukan. Ini mengelakkan ketidakselarasan ketinggian yang mengganggu dalam senarai berasaskan data.
<!-- Cards with minimum row height for visual consistency -->
<div class="grid grid-cols-3 gap-4" style="grid-auto-rows: minmax(120px, auto)">
<div class="bg-indigo-100 p-4 rounded">Short card</div>
<div class="bg-indigo-100 p-4 rounded">
<p>Longer card with</p>
<p>more content</p>
<p>filling it out</p>
</div>
<div class="bg-indigo-100 p-4 rounded">Short</div>
</div>Bekas Aplikasi Praktikal dengan Grid
Dengan menggabungkan semuanya, berikut ialah bekas aplikasi lengkap yang menggunakan CSS Grid untuk reka letak luaran. grid-rows mentakrifkan ketinggian pengepala, kandungan dan pengaki. Dalam baris kandungan, corak bersarang grid-cols-[sidebar_main] membahagikan skrin. Pendekatan ini kemas, boleh dijangka dan tidak memerlukan peletakan mutlak atau helah flexbox untuk struktur peringkat atas.
<div class="grid h-screen" style="grid-template-rows: 56px 1fr 40px">
<header class="bg-indigo-700 text-white px-6 flex items-center">
My App
</header>
<div class="grid overflow-hidden" style="grid-template-columns: 240px 1fr">
<nav class="bg-indigo-50 p-4 overflow-y-auto border-r">
Sidebar nav
</nav>
<main class="p-6 overflow-y-auto">
Page content
</main>
</div>
<footer class="bg-gray-200 text-center text-sm flex items-center justify-center">
Copyright 2024
</footer>
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Tailwind CSS Mastery daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa: grid-rows-* mentakrifkan trek baris eksplisit dengan ketinggian yang sama, grid-flow-row dan grid-flow-col mengawal arah peletakan, dan grid-flow-dense mengisi semula ruang kosong yang ditinggalkan oleh item yang merentasi beberapa trek. Seterusnya, kita akan meneroka utiliti jarak dan kawalan penjajaran dalam bekas grid.
Pelajari HTML 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
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Baris Grid dan Peletakan Automatik” percuma?
Ya — teks penuh “Baris Grid dan Peletakan Automatik” 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 Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Baris Grid dan Peletakan Automatik”?
Tentukan baris nyata dengan grid-rows-*, kawal peletakan automatik dengan grid-flow-*, dan biarkan pelayar meletakkan item secara bijak. Anda berlatih Tailwind 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 Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind 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 “Baris Grid dan Peletakan Automatik” 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 Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind 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
- Menentukan Lajur Grid
- Rentangan Lajur dan Baris
- Baris Grid dan Peletakan Automatik
- Jarak, Penjajaran dan Penempatan dalam Grid