CSS Izgara Oluşturucu
CSS Izgara düzenlerini görsel olarak tasarlayın: sütunları, satırları ve boşluğu ayarlayın, ardından canlı önizleme ve kopyalanabilir CSS ve HTML ile ızgara şablon alanları oluşturmak için hücrelere alan adlarını yazın.
Sonuç
Izgara şablonu alanları bildirimi, CSS'nin en okunabilir parçalarından biridir, ancak yalnızca bir kez var olduğunda - oraya elle ulaşmak, alıntılanan dizeleri saymak ve satır uzunluklarını eşleştirmek anlamına gelir ve uyumsuz bir hücre, tüm düzeni sessizce bozar. Bu oluşturucu bunu doğrudan manipülasyona dönüştürür: sütun ve satır sayılarını ayarlayın, canlı ızgaranın herhangi bir hücresine bir ad yazın ve eşleşen adlar otomatik olarak tek bir adlandırılmış bölgede birleştirilir.
Başlığın altında, boş bıraktığınız her hücre, oluşturulan ızgara şablonu alanları dizesinde bir nokta haline gelir ve adlandırdığınız her hücre, o adın dikdörtgeninin bir parçası olur. CSS yalnızca adlandırılmış bir bölgenin temiz bir dikdörtgen blok işgal etmesine izin verir; bu nedenle araç, siz yazarken bunu kontrol eder ve bir adın henüz geçerli bir dikdörtgen oluşturmadığını size tam olarak söyler - sessizce CSS üretmek yerine tarayıcı reddeder.
Sütun boşluğu ve satır boşluğu varsayılan olarak 8 pikseldir ve eşleştiklerinde tek bir boşluk çizgisi halinde birleştirilirler ve canlı önizleme ızgarası, kutsal kasenin 200 piksellik yan rayları gibi bir ön ayardan sabit piksel sütunları dahil olmak üzere her zaman ızgara şablonu sütunlarınızı ve ızgara şablonu satırlarınızı yansıtır. Kopyalanabilir çıktı her iki tarafı da kapsar: stil sayfanız için hazır bir CSS bloğu ve adlandırılmış bölge başına bir ızgara alanı div'i içeren eşleşen bir HTML iskeleti.
Grid ve flexbox farklı düzen sorunlarını çözer ve bu sitedeki css-flexbox-generator, tek boyutlu düzenler için daha iyi bir başlangıç noktasıdır (gezinti çubuğu veya kart yığını gibi esnek öğelerden oluşan tek bir satır veya sütun). İki boyutlu kontrole, açık satırlara ve sütunlara veya başlık/gezinme/ana/altbilgi gibi adlandırılmış bölgelere ihtiyaç duyduğunuzda bunun yerine bu ızgara oluşturucuya ulaşın; iki araç genellikle aynı sayfada bulunur; sayfa kabuğunun ızgarası ve parçalarının içindeki esnek kutu. Bu sitedeki her araç gibi, tamamen tarayıcınızda çalışır; yükleme yok, hesap yok.