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, atur properti kontainer, dan buka Pengaturan untuk memberi gaya pada tiap anak: order, flex-grow, flex-shrink, flex-basis, dan align-self di mode Flex, atau span kolom/baris dan align-self di mode Grid. Mode Grid juga menyediakan ukuran trek kustom — ketik nilai grid-template-columns/rows apa pun seperti 200px 1fr atau repeat(auto-fit, minmax(120px, 1fr)) — dan editor visual grid-template-areas tempat Anda menamai tiap sel, yang juga membuat garis kisi bernama. Pratinjau langsung berisi ubin bernomor mencerminkan tiap perubahan, dan Anda dapat mengekspor hanya aturan .container atau kontainer plus CSS per-item.

Cara menggunakan Playground CSS Flexbox & Grid

1. Pilih Flex atau Grid dengan sakelar mode untuk menentukan model tata letak yang akan dibuat.
2. Atur properti kontainer — flex-direction/wrap dan justify/align, atau jumlah kolom dan baris dengan justify-items/align-items.
3. Buka Pengaturan untuk mengubah gap dan jumlah item, serta memberi gaya pada tiap anak (order, flex-grow/shrink/basis, align-self, atau span kolom/baris).
4. Di Grid, ubah ukuran trek ke Kustom untuk mengetik grid-template-columns/rows Anda sendiri — px, fr, minmax(), atau repeat(auto-fit/auto-fill, …).
5. Aktifkan editor grid-template-areas dan namai tiap sel untuk menempatkan item menurut area.
6. Pilih mengekspor hanya CSS kontainer atau kontainer plus CSS per-item, lalu salin hasilnya.

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 · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

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

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

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

.container > :nth-child(2) {
  flex-grow: 1;
}

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 menyusunnya dalam dua dimensi dengan grid-template-columns dan grid-template-rows plus justify-items dan align-items. Ganti mode dengan sakelar untuk membandingkan cara tiap model menangani perataan yang sama.

Bagaimana cara memberi gaya pada item individual?

Buka Pengaturan dan gunakan kontrol per-item untuk mengatur order, flex-grow, flex-shrink, flex-basis, dan align-self (Flex) atau span kolom/baris dan align-self (Grid) pada tiap anak. Atur Ekspor ke 'Kontainer + item', dan alat menambahkan aturan .container > :nth-child(n) untuk tiap item yang Anda sesuaikan.

Bisakah saya memakai ukuran trek kustom seperti auto-fit atau minmax()?

Bisa. Di mode Grid ubah ukuran trek ke Kustom dan ketik nilai grid-template-columns/rows yang valid — piksel, satuan fr, minmax(), atau repeat(auto-fit/auto-fill, minmax(120px, 1fr)) untuk kolom responsif. Pratinjau dan CSS yang dihasilkan diperbarui saat Anda mengetik.

Apa fungsi editor grid-template-areas?

Aktifkan di mode Grid dan namai tiap sel kisi; alat merangkai deklarasi grid-template-areas dan sel kosong menjadi titik. Menamai area juga membuat garis kisi bernama, dan Anda dapat menempatkan anak ke sebuah area dengan mengetik namanya di kolom grid-area item tersebut.

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.