# Bangun layout CSS dengan melihat perilaku, bukan menghafal properti
CSS Grid dan Flexbox kuat karena mendeskripsikan hubungan layout alih-alih koordinat tetap. Yang sulit adalah memprediksi bagaimana gap, justify-content, align-items, arah, pembungkusan, track, dan ruang yang tersedia berinteraksi. Generator ini mengubah properti abstrak menjadi taman bermain langsung dengan preset dan CSS real-time. 5 Preset layout cepat
Langsung CSS diperbarui setiap perubahan
0 Ketergantungan framework di CSS
# Flexbox vs Grid: pilih model sebelum menyempurnakan perataan
Flexbox
Terbaik untuk aliran satu dimensi di mana item berbaris dalam baris atau kolom dan membungkus secara alami.
- Bilah navigasi
- Grup tombol
- Kartu membungkus
- Konten terpusat
CSS Grid
Terbaik untuk struktur dua dimensi di mana baris dan kolom menentukan bentuk komposisi.
- Dashboard
- Galeri
- Formulir
- Bagian editorial
# Apa yang diajarkan setiap kontrol
| Kontrol | Properti CSS | Yang perlu diperhatikan |
|---|---|---|
| Arah | flex-direction | Bagaimana sumbu utama mengalir - beralih dari baris ke kolom mengubah seluruh logika layout. |
| Bungkus | flex-wrap | Apakah item tetap di satu baris atau mengalir ke baris baru saat ruang habis. |
| Jarak | gap | Ruang antara item tanpa margin yang rusak di tepi. |
| Ratakan | justify-content | Bagaimana ruang kosong didistribusikan di sepanjang sumbu utama. |
| Ratakan | align-items | Bagaimana item duduk di sumbu silang. |
| Ratakan konten | align-content | Bagaimana baris flex yang terbungkus atau baris grid mendistribusikan ruang sumbu silang tambahan. |
| Kolom | grid-template-columns | Berapa banyak track sama yang dibuat grid sebelum item pindah ke baris lain. |
| Ukuran kontainer | width dan min-height | Bagaimana CSS yang sama bereaksi saat ruang yang tersedia berubah. |
Skalakan dulu, optimalkan kemudian
Mulailah dengan menskalakan kanvas ke ukuran realistis. Kemudian sesuaikan jarak dan perataan. Dengan begitu CSS yang dihasilkan berfungsi dalam kondisi nyata.# CSS bersih yang dapat Anda adaptasi
.layout-playground {display: flex;flex-direction: row;flex-wrap: wrap;gap: 24px;justify-content: center;align-items: center;}
Mengapa penskalaan visual penting
Banyak bug layout hanya muncul saat kontainer lebih sempit, lebih tinggi, atau diisi dengan jumlah item berbeda. Menskalakan saat CSS diperbarui langsung membantu menemukan pembungkusan yang canggung dan pilihan perataan yang rapuh.
Alur kerja yang direkomendasikan
Pilih preset atau Flexbox untuk aliran satu dimensi dan Grid untuk struktur dua dimensi.
Skalakan kanvas sebelum menyalin CSS agar layout bertahan dalam batasan realistis.
Gunakan gap untuk jarak antar item alih-alih menambahkan margin ke setiap anak.
Salin CSS yang dihasilkan sebagai titik awal, lalu tambahkan selector spesifik proyek dan media queries.