CSS Grid Generator - Generator Grid CSS drag-and-drop

• Alat yang membantu membuat layout grid CSS kustom dengan lebih mudah
  • Ukuran kolom, baris, dan jarak dapat diatur dengan nyaman melalui interaksi mouse
• Cara penggunaan
  • Tentukan kolom, baris, dan jarak sesuai kebutuhan
  • Klik kotak dengan simbol + untuk menambahkan elemen baru ke grid
  • Gunakan handle di sudut kanan bawah untuk menyesuaikan ukuran DIV
  • Seret dan lepas untuk memindahkan DIV ke posisi yang diinginkan
  • Terakhir, salin kode HTML dan CSS yang dihasilkan lalu tempelkan ke proyek
• Setelah membuat Tailwind Grid Generator dan menerima umpan balik positif, pengembang lalu mengembangkan alat ini untuk plain CSS

[GN⁺]

Opini Hacker News

• Setelah menambahkan beberapa kotak lalu memindahkannya hingga saling tumpang tindih, muncul masalah yang membuatnya keluar dari batas grid
• Pernah membuat Tailwind Grid Generator dan menerima umpan balik positif, lalu berdasarkan itu mengembangkan alat untuk plain CSS
• Penataan ulang dinamis adalah masalah yang lebih sulit daripada pengaturan grid
  • Merujuk ke MDN untuk mencari cara agar grid bisa mengurangi atau menambah kolom
  • Utilitas sederhana berguna untuk menyederhanakan pekerjaan yang berulang
  • Menyimpan status konfigurasi grid di URL tampaknya akan berguna
• Generator ini berguna sebagai alat pembelajaran, dan setelah memahami sintaks serta fiturnya, penggunaannya bisa lebih fleksibel
  • Chrome Dev Tools juga berguna untuk mengubah grid dan langsung melihat perubahannya
  • Menulis sebuah posting tentang grid
• Sebagai programmer lama, saya terbiasa membuat grid dengan tabel, tetapi layout CSS terasa sulit
  • Alat seperti ini sangat membantu
• Beberapa tahun lalu menemukan generator situs serupa, tetapi tidak memiliki fitur drag-and-drop
  • Belajar konsep dasar CSS Grid seperti grid-template-columns, gap, dan lainnya
  • Semoga terus melanjutkan kerja bagus ini
• Saat grid pertama kali muncul, saya pikir ini akan secara mendasar mengubah layout web berdasarkan template area
  • Tidak sempat membuat framework internal dan akhirnya memakai flex
  • Tailwind muncul dan memenuhi semua kebutuhan untuk menulis frontend responsif dengan cepat
  • Penasaran apakah ada framework atau contoh bagus yang menggunakan template area
  • Akan memakai alat ini saat berikutnya bekerja dengan grid
• Menemukan dua bug
  • Saat ukuran jendela browser diubah, lebarnya tidak merespons
  • Karena kotaknya lebih pendek daripada kontainer, baris baru muncul lebih tinggi di grid
• Saya bukan web developer, tetapi rasanya ada kasus yang membutuhkan lebih dari 12 kolom
  • Jika memasukkan angka yang lebih besar, kolom diparse dengan aneh
• UX-nya sangat bagus
  • Saya tidak sering membuat layout halaman, jadi tidak mempelajari sintaks grid secara mendalam, tetapi saya akan menyimpan bookmark alat ini