CSS Grid Jeneratörü

Sütunlarınızı ve satırlarınızı belirleyin, öğeleri yerleştirmek için hücreler üzerinde sürükleyin ve tek tıkla eşleşen HTML ile birlikte grid CSS kodunu kopyalayın.

Ön Ayarlar
Öğeler
CSS
HTML
Bir öğe yerleştirmek için ızgara üzerinde sürükleyin.

Izgaranız doğrudan tarayıcınızda oluşturulur. Burada yaptığınız hiçbir ayar BroBroGo sunucularına yüklenmez.

SSS

Izgara (grid) üzerine öğeleri nasıl yerleştiririm?

Hücrelerin üzerinde basılı tutup sürükleyerek bir dikdörtgen çizin — bıraktığınızda bu alan, o sütun ve satırları kaplayan yerleştirilmiş bir alt eleman (child) haline gelir. Çizdiğiniz her öğe CSS'te kendi grid-column ve grid-row kuralını ve HTML'de eşleşen bir div alır. Öğeler üst üste gelebilir ve daha sonra çizilen üstte yer alır; kaldırmak için öğe üzerindeki × işaretini kullanın.

Sütunlar ve satırlar farklı boyutlarda olabilir mi?

Evet. Her izleğin (track) kendi boyut kutusu vardır ve oraya herhangi bir grid değeri yazabilirsiniz — 1fr, 200px, auto, min-content veya minmax(120px, 1fr). Aynı boyutu paylaşan izlekler, çıktının kısa kalması için repeat() içinde birleştirilir. Sütun boşluğu ve satır boşluğu ayrı ayrı ayarlanır ve eşleştiklerinde tek bir gap değerine indirgenir.

Oluşturulan kodla ne yapmalıyım?

CSS ve HTML kodlarını yan yana kopyalayın. HTML size her öğe için bir div içeren kapsayıcıyı verir, CSS ise ızgarayı tanımlar ve her öğeyi konumlandırır. Her ikisini de projenize yapıştırdığınızda burada çizdiğiniz düzenin aynısını elde edersiniz.

CSS Cubic Bezier JeneratörüBir geçiş eğrisi şekillendirmek için iki kolu sürükleyin, sabit bir hıza karşı hareketini izleyin ve cubic-bezier() değerini kopyalayın.Flexbox JeneratörüGörsel kontrollerle bir flex kapsayıcısı ve öğelerini kurun, düzenin canlı tepki vermesini izleyin ve tek tıkla CSS kodunu kopyalayın.Box Shadow JeneratörüKutu gölgesi oluşturmak için kaydırıcıları sürükleyin, derinlik için katmanlar ekleyin ve bitmiş CSS kodunu anında kopyalayın.Gradyan JeneratörüDoğrusal, radyal veya konik bir gradyan oluşturun, renk durakları ekleyin, yönü belirleyin ve CSS kodunu tek tıkla kopyalayın.Border Radius JeneratörüKaydırıcılarla her köşeyi yuvarlatın, eliptik modla organik damla şekilleri oluşturun ve CSS kodunu anında kopyalayın.CSS clamp() HesaplayıcıKüçük ve büyük ekranlar için bir boyut girin ve yazı boyutları, padding, margin veya gap değerleri için aralarında sorunsuz bir şekilde ölçeklenen akıcı bir clamp() değeri elde edin.