CSS Grid Generator - Sürükle ve Bırak CSS Grid Oluşturucu

• Özel CSS grid düzenlerini daha kolay oluşturmanıza yardımcı olan bir araç
  • Sütun, satır ve boşluk boyutları fare hareketleriyle kolayca belirlenebiliyor
• Kullanım şekli
  • Sütunları, satırları ve boşlukları ihtiyacınıza göre ayarlayın
  • Grid'e yeni bir öğe eklemek için + işaretli kareye tıklayın
  • DIV boyutunu ayarlamak için sağ alt köşedeki tutamacı kullanın
  • DIV'i istediğiniz konuma sürükleyip bırakarak yeniden yerleştirin
  • Son olarak oluşturulan HTML ve CSS kodunu kopyalayıp projenize yapıştırın
• Tailwind Grid Generator'ı geliştirip olumlu geri bildirim aldıktan sonra, bunu temel alarak plain CSS için bir araç geliştirmiş

[GN⁺]

Hacker News görüşleri

• Birkaç kutu ekledikten sonra üst üste gelecek şekilde taşıyınca grid sınırlarının dışına çıkma sorunu oluşuyor
• Tailwind Grid Generator yapıp olumlu geri bildirim aldıktan sonra, bunu temel alarak plain CSS için bir araç geliştirmiş
• Grid ayarlarından ziyade dinamik yeniden düzenleme daha zor bir problem
  • MDN'e bakarak gridin sütunları nasıl azaltıp artıracağını bulmuş
  • Basit bir yardımcı araç, tekrarlı işleri sadeleştirmede faydalı
  • Grid yapılandırma durumunu URL'de saklamak faydalı olabilir gibi görünüyor
• Oluşturucu, bir öğrenme aracı olarak faydalı; sözdizimi ve özellikleri anlayınca daha esnek kullanılabiliyor
  • Chrome DevTools da gridi düzenleyip değişiklikleri anında görmek için faydalı
  • Grid hakkında bir yazı yazmış
• Eski usul bir programcı olarak tablolarla grid yazmaya alışkınım ama CSS yerleşimleri zor geliyor
  • Bu tür araçlar çok yardımcı oluyor
• Birkaç yıl önce benzer bir site oluşturucu bulmuş ama sürükle-bırak özelliği yokmuş
  • grid-template-columns, gap gibi CSS Grid'in temel kavramlarını öğrenmiş
  • İyi iş çıkarmaya devam etmesini diliyor
• Grid ilk çıktığında, template areas tabanlı olarak web yerleşimlerini kökten değiştireceğini düşünmüş
  • Kendi iç framework'ünü oluşturamayınca flex kullanmış
  • Sonra Tailwind çıkmış ve hızlı responsive frontend yazmak için gereken her şeyi sağlamış
  • Template areas kullanan iyi bir framework veya örnek bilip bilmediklerini merak ediyor
  • Bir dahaki grid işinde bu aracı kullanacak
• İki hata bulmuş
  • Tarayıcı penceresinin boyutu değiştirilince genişlik responsive davranmıyor
  • Kutular container'dan daha kısa olduğunda yeni satır gridde daha yukarı konumlanıyor
• Web geliştiricisi değil ama 12'den fazla sütunun gerektiği durumlar olabileceğini düşünüyor
  • Daha büyük bir sayı girince sütunlar garip şekilde parse ediliyor
• UX çok iyi
  • Sık sık sayfa yerleşimi yazmadığı için grid sözdizimini derinlemesine öğrenmedi ama bu aracı yer imlerine ekleyecek