Jarak, Justifikasi, dan Perataan dalam Grid
Tambahkan jarak antar-sel grid dengan gap-x-* dan gap-y-*, lalu ratakan item di dalam area grid menggunakan justify-items-* dan place-items-*.
Jarak, Justifikasi, dan Perataan dalam Grid adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Jarak Antar-Sel Kisi
Setelah kolom dan baris kisi ditentukan, langkah berikutnya adalah mengatur jarak antar-sel. Utilitas gap-* Tailwind secara langsung memetakan singkatan CSS gap, yang mengatur celah baris dan kolom secara bersamaan. Satu kelas gap-4 (16px) memberikan jarak yang konsisten ke segala arah, sehingga tata letak tetap seimbang tanpa CSS khusus.
<!-- Uniform gap in all directions -->
<div class="grid grid-cols-3 gap-4">
<div class="bg-blue-100 p-4 rounded">A</div>
<div class="bg-blue-100 p-4 rounded">B</div>
<div class="bg-blue-100 p-4 rounded">C</div>
<div class="bg-blue-100 p-4 rounded">D</div>
<div class="bg-blue-100 p-4 rounded">E</div>
<div class="bg-blue-100 p-4 rounded">F</div>
</div>Utilitas gap-x-* dan gap-y-*
Jika Anda memerlukan jarak yang berbeda antara kolom dan antara baris, gunakan gap-x-* untuk celah horizontal dan gap-y-* untuk celah vertikal. Misalnya, gap-x-8 gap-y-4 memberikan ruang horizontal yang lebar antarkolom dan ruang vertikal yang lebih rapat antarbaris. Dengan demikian, Anda dapat menyempurnakan ritme visual kisi secara terpisah untuk setiap arah.
<!-- Wide horizontal gap, tight vertical gap -->
<div class="grid grid-cols-3 gap-x-10 gap-y-2">
<div class="bg-green-100 p-3 rounded">A</div>
<div class="bg-green-100 p-3 rounded">B</div>
<div class="bg-green-100 p-3 rounded">C</div>
<div class="bg-green-100 p-3 rounded">D</div>
<div class="bg-green-100 p-3 rounded">E</div>
<div class="bg-green-100 p-3 rounded">F</div>
</div>Justify Items — Perataan Sel Horizontal
justify-items-* mengatur cara item diratakan secara horizontal di dalam sel kisinya. Keempat nilainya adalah justify-items-start, justify-items-center, justify-items-end, dan justify-items-stretch (bawaan). Saat direnggangkan, item mengisi seluruh lebar selnya. Pemusatan umum digunakan pada kisi berbasis ikon ketika Anda ingin setiap ikon berada di tengah kolomnya.
<!-- Icons centered within each grid cell -->
<div class="grid grid-cols-4 gap-6 justify-items-center">
<div class="text-4xl">📷</div>
<div class="text-4xl">🎵</div>
<div class="text-4xl">📚</div>
<div class="text-4xl">🎮</div>
</div>Align Items — Perataan Sel Vertikal
Dalam konteks kisi, align-items-* mengatur cara item diratakan secara vertikal di dalam jalur barisnya. items-start menambatkan item ke bagian atas baris, items-center memusatkannya secara vertikal, dan items-end mendorongnya ke bagian bawah. Nilai bawaannya adalah items-stretch, yang membuat item mengisi tinggi barisnya. Ini berbeda dari align-items pada Flexbox, tetapi menggunakan nama kelas yang sama di Tailwind.
<!-- Grid row with mixed-height cells, items aligned to center -->
<div class="grid grid-cols-3 gap-4 items-center h-32">
<div class="bg-purple-200 p-2 rounded h-8">Short</div>
<div class="bg-purple-200 p-6 rounded">Tall</div>
<div class="bg-purple-200 p-2 rounded h-12">Medium</div>
</div>place-items untuk Kedua Sumbu Sekaligus
Utilitas place-items-* adalah singkatan yang mengatur align-items dan justify-items secara bersamaan. place-items-center memusatkan setiap item kisi secara tepat, baik horizontal maupun vertikal, di dalam selnya—sesuatu yang sebelumnya memerlukan dua properti CSS terpisah. Ini ideal untuk kisi ikon, tampilan avatar, dan kisi apa pun yang itemnya perlu berada di tengah sel.
<!-- Avatar cards, each item perfectly centered in its cell -->
<div class="grid grid-cols-4 gap-4 place-items-center">
<div class="w-16 h-16 bg-red-400 rounded-full flex items-center justify-center text-white font-bold">JD</div>
<div class="w-16 h-16 bg-blue-400 rounded-full flex items-center justify-center text-white font-bold">AB</div>
<div class="w-16 h-16 bg-green-400 rounded-full flex items-center justify-center text-white font-bold">CK</div>
<div class="w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center text-white font-bold">MR</div>
</div>Justify Content — Meratakan Seluruh Kisi
Jika lebar total kolom kisi lebih kecil daripada lebar kontainer, justify-content-* memosisikan seluruh blok kisi secara horizontal di dalam kontainer. justify-center memusatkan kelompok kolom, justify-between merentangkan kolom hingga ke tepi, dan justify-around menambahkan ruang yang merata di sekitar setiap kolom. Ini berbeda dari justify-items, yang meratakan item di dalam sel.
<!-- Fixed-width columns centered within a wide container -->
<div class="grid gap-4 justify-center" style="grid-template-columns: repeat(3, 100px)">
<div class="bg-orange-100 p-4 rounded">A</div>
<div class="bg-orange-100 p-4 rounded">B</div>
<div class="bg-orange-100 p-4 rounded">C</div>
</div>Align Content — Pemosisian Kisi Vertikal
align-content-* mengatur posisi seluruh rangkaian baris kisi secara vertikal ketika tinggi total baris lebih kecil daripada kontainer. content-center memusatkan semua baris secara vertikal, content-between merentangkannya ke bagian atas dan bawah, dan content-evenly membagikan ruang yang sama di antaranya. Ini sangat berguna pada kontainer dengan tinggi tetap, seperti widget dasbor.
<!-- 2 rows centered in a tall container -->
<div class="grid grid-cols-2 gap-4 h-64 content-center">
<div class="bg-teal-100 p-4 rounded">Row 1, A</div>
<div class="bg-teal-100 p-4 rounded">Row 1, B</div>
<div class="bg-teal-100 p-4 rounded">Row 2, A</div>
<div class="bg-teal-100 p-4 rounded">Row 2, B</div>
</div>place-content — Singkatan Tingkat Kisi
place-content-* adalah singkatan yang menggabungkan align-content dan justify-content dalam satu utilitas. place-content-center memusatkan seluruh kisi di dalam kontainernya, baik secara horizontal maupun vertikal. Ini berguna untuk kisi layar penuh yang terpusat, layar pemuatan, atau situasi apa pun ketika Anda ingin blok kisi berada di tengah area yang lebih besar.
<!-- Grid block centered inside the viewport -->
<div class="grid h-screen place-content-center gap-6" style="grid-template-columns: repeat(2, 200px)">
<div class="bg-sky-200 p-8 rounded text-center">Option A</div>
<div class="bg-sky-200 p-8 rounded text-center">Option B</div>
</div>Penggantian Per Item dengan justify-self dan align-self
Terkadang Anda perlu satu item tertentu berperilaku berbeda dari item lain dalam kisi. justify-self-* menggantikan justify-items untuk satu sel, sedangkan align-self-* menggantikan align-items. Misalnya, Anda dapat menggunakan justify-self-end untuk mendorong satu tombol tindakan ke kanan di dalam selnya, sementara semua sel lainnya tetap diratakan ke kiri.
<!-- Most items default, but last button right-aligned -->
<div class="grid grid-cols-3 gap-4 items-start">
<div class="bg-gray-100 p-4">Content A</div>
<div class="bg-gray-100 p-4">Content B</div>
<button class="justify-self-end bg-blue-500 text-white px-4 py-2 rounded self-center">
Action
</button>
</div>place-self — Singkatan Per Item
place-self-* adalah singkatan per item yang menggabungkan align-self dan justify-self. Nilai yang paling serbaguna adalah place-self-center, yang memusatkan satu item secara horizontal dan vertikal di dalam selnya, terlepas dari pengaturan yang ditentukan kisi induk. Ini berguna untuk memusatkan ikon atau pemutar di dalam sel kisi berukuran tetap.
<!-- One loading spinner centered in its grid cell -->
<div class="grid grid-cols-3 gap-4 h-32">
<div class="bg-gray-100 p-4 rounded">Content</div>
<div class="bg-gray-100 rounded place-self-center">
<div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
</div>
<div class="bg-gray-100 p-4 rounded">Content</div>
</div>Referensi Lengkap Perataan Kisi
Berikut model mental singkat untuk perataan kisi di Tailwind: justify-items / align-items — meratakan elemen anak di dalam sel (tingkat item). justify-content / align-content — memosisikan seluruh blok kisi di dalam kontainer (tingkat jalur). justify-self / align-self — mengganti perataan untuk satu item. Padukan semuanya dengan varian singkatan place-* untuk menangani kedua sumbu sekaligus.
<!-- Summary: centered grid, stretched items, one overridden -->
<div class="grid grid-cols-3 gap-6 place-content-center place-items-center h-48">
<div class="w-20 h-20 bg-indigo-200 rounded flex items-center justify-center">A</div>
<div class="w-20 h-20 bg-indigo-300 rounded flex items-center justify-center">B</div>
<!-- Override: this item aligns to end instead of center -->
<div class="w-20 h-20 bg-indigo-400 rounded flex items-center justify-center self-end">
C
</div>
</div>Pemeriksaan Singkat
Uji pemahaman Anda tentang konsep Tailwind CSS Mastery dari pelajaran ini.
Ringkasan Pelajaran
Dalam pelajaran ini, Anda mempelajari: gap-x-* dan gap-y-* mengatur celah horizontal dan vertikal secara terpisah, justify-items dan align-items memosisikan konten di dalam setiap sel kisi, serta justify-content dan align-content memosisikan seluruh kisi di dalam kontainernya. Selanjutnya, kita akan membahas utilitas ukuran yang mengatur lebar dan tinggi elemen.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Jarak, Justifikasi, dan Perataan dalam Grid” gratis?
Ya — teks lengkap “Jarak, Justifikasi, dan Perataan dalam Grid” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Jarak, Justifikasi, dan Perataan dalam Grid”?
Tambahkan jarak antar-sel grid dengan gap-x-* dan gap-y-*, lalu ratakan item di dalam area grid menggunakan justify-items-* dan place-items-*. Kamu berlatih Tailwind 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 Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind 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 4 dari 4.
Berapa lama pelajaran “Jarak, Justifikasi, dan Perataan dalam Grid” 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 Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind 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
- Menentukan Kolom Grid
- Rentang Kolom dan Baris
- Baris Grid dan Penempatan Otomatis
- Jarak, Justifikasi, dan Perataan dalam Grid