Playground CSS Flexbox & Grid

Apa itu Playground CSS Flexbox & Grid?

Playground CSS Flexbox & Grid adalah sandbox visual gratis untuk mempelajari dan membuat prototipe dua model tata letak utama CSS, dibuat untuk pengembang front-end, pelajar, dan desainer. Pilih Flex atau Grid dengan sakelar mode, lalu atur properti kontainer dengan dropdown sederhana dan input angka: dalam mode Flex Anda mengontrol flex-direction, flex-wrap, justify-content, dan align-items; dalam mode Grid Anda menentukan berapa banyak kolom dan baris (ditampilkan sebagai repeat(n, 1fr)) ditambah justify-items dan align-items. Nilai gap dan jumlah item berlaku untuk keduanya. Pratinjau langsung berisi ubin bernomor menunjukkan dengan tepat bagaimana perilaku perataan dan jarak Anda, dan aturan .container CSS lengkap dibuatkan untuk Anda salin. Gunakan kapan pun Anda ingin melihat tampilan nyata pengaturan flex atau grid sebelum menempelkannya ke proyek Anda.

Cara menggunakan Playground CSS Flexbox & Grid

1. Pilih Flex atau Grid dengan sakelar mode untuk menentukan model tata letak mana yang akan dibuat.
2. Dalam mode Flex, atur flex-direction, flex-wrap, justify-content, dan align-items dari dropdown.
3. Dalam mode Grid, atur jumlah kolom dan baris, ditambah justify-items dan align-items.
4. Buka Pengaturan untuk mengubah gap (jarak dalam px) dan jumlah item yang ditampilkan di pratinjau.
5. Perhatikan pratinjau ubin tersusun ulang saat Anda mengubah setiap properti.
6. Salin aturan .container CSS yang dihasilkan dan tempelkan ke lembar gaya Anda.

Contoh

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

Pertanyaan yang sering diajukan

Apa perbedaan antara Flexbox dan Grid di sini?

Mode Flex menyusun item di sepanjang satu sumbu dan menyediakan flex-direction, flex-wrap, justify-content, dan align-items. Mode Grid menyusun item dalam kisi dua dimensi menggunakan grid-template-columns dan grid-template-rows (ditulis sebagai repeat(n, 1fr)) bersama justify-items dan align-items. Ganti mode dengan sakelar untuk membandingkan bagaimana tiap model menangani perataan yang sama.

Apa fungsi nilai gap?

Gap mengatur, dalam piksel, jarak antara setiap item baik di tata letak Flex maupun Grid melalui properti CSS gap. Tingkatkan untuk merenggangkan ubin atau setel ke 0 untuk tata letak yang rapat; pratinjau dan CSS yang dihasilkan sama-sama diperbarui secara instan.

Mengapa justify-content dan align-items ditulis berbeda di Grid?

Grid menggunakan kata kunci start, end, center, dan stretch untuk justify-items dan align-items, sedangkan Flex menggunakan flex-start dan flex-end. Alat ini menghasilkan kata kunci yang benar sesuai mode yang Anda gunakan, sehingga CSS yang disalin selalu valid.

Bisakah saya mengubah jumlah item yang ditampilkan?

Bisa. Buka Pengaturan dan ubah jumlah item untuk menambah atau menghapus ubin pratinjau bernomor (hingga 24). Ini hanya memengaruhi demonstrasi di layar; CSS yang dihasilkan menggambarkan kontainer, bukan item itu sendiri.

Apakah data saya diunggah ke suatu tempat?

Tidak. Playground berjalan sepenuhnya di browser Anda dengan JavaScript, jadi pengaturan Anda dan CSS yang dihasilkan tidak pernah dikirim ke server. Ia bekerja secara privat dan bahkan offline setelah halaman dimuat.