Menentukan Lajur Grid
Cipta tataletak berbilang lajur dengan grid-cols-1 hingga grid-cols-12, dan gunakan grid-cols-none untuk konfigurasi tersuai.
Menentukan Lajur Grid ialah pelajaran Tailwind 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 Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
CSS Grid dalam Tailwind
CSS Grid ialah sistem reka letak dua dimensi yang membolehkan Anda meletakkan item dalam baris dan lajur secara serentak. Tailwind CSS menyediakan kelas utiliti yang dipetakan terus kepada sifat CSS Grid, jadi Anda tidak perlu menulis display: grid atau grid-template-columns secara manual. Anda hanya perlu menambah nama kelas yang betul pada elemen HTML.
<div class="grid">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Mengaktifkan Paparan Grid
Untuk menukar elemen menjadi bekas grid, gunakan kelas grid. Tanpa takrifan lajur, semua anak disusun dalam satu lajur secara lalai. Ini ialah titik permulaan bagi mana-mana reka letak Grid Tailwind — setiap utiliti grid yang Anda tambahkan dibina di atas kelas grid.
<!-- Single-column grid by default -->
<div class="grid gap-4">
<div class="bg-blue-100 p-4">Card 1</div>
<div class="bg-blue-100 p-4">Card 2</div>
<div class="bg-blue-100 p-4">Card 3</div>
</div>Utiliti grid-cols-N
Tailwind menyediakan grid-cols-1 hingga grid-cols-12 untuk membahagikan bekas kepada lajur yang sama lebarnya. Di sebalik tabir, grid-cols-3 dikompilkan kepada grid-template-columns: repeat(3, minmax(0, 1fr)). Ini bermaksud semua lajur berkongsi lebar yang tersedia secara sama rata, menjadikannya sesuai untuk grid kad dan bahagian ciri.
<!-- 3-column equal grid -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-green-100 p-4">Col 1</div>
<div class="bg-green-100 p-4">Col 2</div>
<div class="bg-green-100 p-4">Col 3</div>
<div class="bg-green-100 p-4">Col 4</div>
<div class="bg-green-100 p-4">Col 5</div>
<div class="bg-green-100 p-4">Col 6</div>
</div>Bilangan Lajur Lazim
Bilangan lajur yang berbeza sesuai untuk kegunaan yang berbeza. Grid 2 lajur berfungsi baik untuk bahagian kandungan terpisah, 3 lajur untuk baris ciri, manakala 4 atau 6 lajur untuk galeri produk atau imej. Tailwind menyokong setiap nombor bulat dari 1 hingga 12, memberikan anda julat yang sama seperti sistem grid Bootstrap tetapi tanpa pembalut baris.
<!-- 2-col layout -->
<div class="grid grid-cols-2 gap-6">
<div class="bg-purple-100 p-6">Left panel</div>
<div class="bg-purple-100 p-6">Right panel</div>
</div>
<!-- 4-col product grid -->
<div class="grid grid-cols-4 gap-4">
<div class="bg-yellow-100 p-4">Product</div>
<div class="bg-yellow-100 p-4">Product</div>
<div class="bg-yellow-100 p-4">Product</div>
<div class="bg-yellow-100 p-4">Product</div>
</div>Sistem Grid 12 Lajur
Grid 12 lajur ialah konvensyen reka bentuk klasik kerana 12 boleh dibahagi dengan 1, 2, 3, 4 dan 6, lalu memberikan banyak fleksibiliti susun atur. Dengan grid-cols-12 Tailwind, setiap anak menduduki satu lajur secara lalai. Kemudian, gunakan col-span-* pada anak tertentu untuk menjadikannya merentangi beberapa lajur — yang akan kita terokai dalam pelajaran seterusnya.
<!-- 12-column base -->
<div class="grid grid-cols-12 gap-2">
<!-- Each child spans 1 col unless told otherwise -->
<div class="bg-red-100 p-2">1</div>
<div class="bg-red-100 p-2">2</div>
<div class="bg-red-100 p-2">3</div>
<!-- ...up to 12 -->
</div>grid-cols-none untuk Grid Tersuai
Apabila pratetap 1–12 yang tersedia tidak mencukupi, gunakan grid-cols-none untuk membuang sebarang templat lajur, kemudian takrifkan templat sendiri dengan nilai arbitrari grid-cols-[...]. Notasi kurungan membolehkan anda menulis sebarang nilai grid-template-columns CSS yang sah terus dalam nama kelas, memberikan fleksibiliti tanpa had tanpa perlu meninggalkan HTML.
<!-- Custom column widths with arbitrary values -->
<div class="grid grid-cols-[200px_1fr_2fr] gap-4">
<div class="bg-indigo-100 p-4">Fixed 200px</div>
<div class="bg-indigo-100 p-4">1 fraction</div>
<div class="bg-indigo-100 p-4">2 fractions</div>
</div>Subgrid dengan Tailwind
Pelayar moden menyokong kata kunci subgrid, yang membolehkan grid bersarang mewarisi trek lajur induknya. Tailwind v3.4+ menyertakan grid-cols-subgrid untuk tujuan ini. Subgrid amat berguna untuk menjajarkan label borang dalam komponen kad yang berada dalam grid induk — elemen dalaman setiap kad sejajar dengan garis grid keseluruhan.
<!-- Parent grid with 3 columns -->
<div class="grid grid-cols-3 gap-4">
<!-- Child that spans 2 cols and uses subgrid internally -->
<div class="col-span-2 grid grid-cols-subgrid gap-2">
<div class="bg-teal-100 p-3">A</div>
<div class="bg-teal-100 p-3">B</div>
</div>
<div class="bg-teal-200 p-3">C</div>
</div>Menggabungkan Grid dengan Jarak
Utiliti gap-* menambahkan jarak yang konsisten antara sel grid. Gunakan gap-4 untuk jarak seragam dalam kedua-dua arah, gap-x-4 untuk jarak mendatar sahaja, dan gap-y-6 untuk jarak menegak sahaja. Tidak seperti margin, gap tidak menambahkan ruang tambahan pada tepi luar grid, lalu memastikan susun atur anda kemas dan mudah dijangka.
<!-- Different horizontal and vertical gaps -->
<div class="grid grid-cols-3 gap-x-8 gap-y-4">
<div class="bg-orange-100 p-4">A</div>
<div class="bg-orange-100 p-4">B</div>
<div class="bg-orange-100 p-4">C</div>
<div class="bg-orange-100 p-4">D</div>
<div class="bg-orange-100 p-4">E</div>
<div class="bg-orange-100 p-4">F</div>
</div>Takrifan Lajur Responsif
Dalam kebanyakan susun atur dunia sebenar, anda mahukan lebih sedikit lajur pada skrin kecil dan lebih banyak lajur pada skrin besar. Awalan responsif Tailwind menjadikan perkara ini mudah: grid-cols-1 md:grid-cols-2 lg:grid-cols-4 menyusun item secara bertingkat pada telefon, memaparkan dua lajur pada tablet dan empat lajur pada komputer meja. Pendekatan mengutamakan mudah alih ini bermaksud kelas tanpa awalan ialah asas, manakala kelas berawalan mengatasinya pada titik henti yang lebih besar.
<!-- Mobile: 1 col, tablet: 2 cols, desktop: 4 cols -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-sky-100 p-6 rounded-lg">Card A</div>
<div class="bg-sky-100 p-6 rounded-lg">Card B</div>
<div class="bg-sky-100 p-6 rounded-lg">Card C</div>
<div class="bg-sky-100 p-6 rounded-lg">Card D</div>
</div>Lajur Auto-Fill berbanding Auto-Fit
Kata kunci auto-fill dan auto-fit CSS Grid menghasilkan bilangan lajur dinamik berdasarkan ruang yang tersedia. Dengan sintaks nilai arbitrari Tailwind, anda boleh menulis grid-cols-[repeat(auto-fill,minmax(200px,1fr))] untuk menambahkan lajur secara automatik apabila ruang mengizinkan. auto-fill mengekalkan trek kosong, manakala auto-fit meruntuhkannya — kedua-duanya menghasilkan grid yang benar-benar fleksibel tanpa pertanyaan media.
<!-- Auto-filling card grid: min 250px per card -->
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))">
<div class="bg-pink-100 p-4 rounded">Card 1</div>
<div class="bg-pink-100 p-4 rounded">Card 2</div>
<div class="bg-pink-100 p-4 rounded">Card 3</div>
<div class="bg-pink-100 p-4 rounded">Card 4</div>
<div class="bg-pink-100 p-4 rounded">Card 5</div>
</div>Grid Ciri Tiga Lajur Praktikal
Dengan menggabungkan semuanya, berikut ialah corak bahagian ciri sebenar yang digunakan pada halaman pemasaran. Setiap kad ciri mempunyai ikon, tajuk dan penerangan. Gridnya ialah grid-cols-1 sm:grid-cols-3, jadi item disusun bertingkat pada telefon dan berkembang menjadi tiga lajur pada skrin yang lebih besar. Padanan ruang dalam dan latar belakang yang halus menghasilkan pemisahan visual tanpa sempadan.
<section class="grid grid-cols-1 sm:grid-cols-3 gap-8 px-8 py-12">
<div class="text-center">
<div class="text-4xl mb-4">🚀</div>
<h3 class="font-bold text-lg mb-2">Fast</h3>
<p class="text-gray-600">Ships in milliseconds.</p>
</div>
<div class="text-center">
<div class="text-4xl mb-4">🔒</div>
<h3 class="font-bold text-lg mb-2">Secure</h3>
<p class="text-gray-600">Built-in protection.</p>
</div>
<div class="text-center">
<div class="text-4xl mb-4">📱</div>
<h3 class="font-bold text-lg mb-2">Responsive</h3>
<p class="text-gray-600">Works on all devices.</p>
</div>
</section>Semakan Pantas
Uji pemahaman anda tentang konsep Penguasaan Tailwind CSS daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda telah mempelajari: kelas grid mengaktifkan bekas CSS Grid, grid-cols-1 hingga grid-cols-12 mentakrifkan trek lajur yang sama lebarnya, dan awalan responsif seperti md:grid-cols-3 menukar bilangan lajur pada titik henti. Seterusnya, kita akan meneroka cara menjadikan item grid merentangi beberapa lajur dan baris untuk susun atur yang kompleks.
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 “Menentukan Lajur Grid” percuma?
Ya — teks penuh “Menentukan Lajur Grid” 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 “Menentukan Lajur Grid”?
Cipta tataletak berbilang lajur dengan grid-cols-1 hingga grid-cols-12, dan gunakan grid-cols-none untuk konfigurasi tersuai. 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 1 daripada 4.
Berapa lamakah pelajaran “Menentukan Lajur Grid” 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