Düzeni seç, CSS kodu hazır olsun
Bir sayfa düzenini kurarken en çok zaman alan iş, özelliklerin birbirini nasıl etkilediğini denemektir. Bu CSS flexbox grid oluşturucu, düzen türünü ve değerleri seçtiğin anda önizlemeyi yeniler ve karşılığındaki kapsayıcı kodunu yazar. Kodu doğrudan stil dosyana taşıyabilirsin. Böylece deneme yanılma yerine sonucu görerek karar verir, tarayıcı geliştirici araçlarında tek tek değer değiştirme zahmetinden kurtulursun.
Flexbox tek eksende çalışır: flex-direction satır ya da sütun yönünü, justify-content ana eksendeki dağılımı, align-items çapraz eksendeki hizayı belirler. Grid ise iki eksenli bir ızgara kurar; sütun ve satır sayısını sen verirsin, tarayıcı repeat(3, 1fr) gibi eşit paylar üretir. Her iki düzende gap değeri öğeler arasındaki boşluğu tek satırda çözer, kenar boşluğu hesabına gerek bırakmaz.
Somut bir örnek: Üç sütunlu ve iki satırlı bir kart listesi için düzeni Grid yap, sütun sayısına 3, satır sayısına 2, boşluğa 16 gir. Çıktıda display: grid, üç eşit sütun ve 16 piksellik boşluk görürsün; önizlemede altı kutu iki sıra halinde dizilir. Aynı içeriği Flexbox ve wrap ile denersen kutular genişliğine göre alt satıra kayar, son satır boşluğu farklı dolar.
- Tek yönlü sıralar, menüler ve ortalama için Flexbox daha kısa çözümdür.
- Satır ve sütunu birlikte kontrol edeceğin kart ızgaraları için Grid uygundur.
Kod üretildikten sonra metin boyutlarını akıcı yapmak için clamp ile esnek boyut kurabilir, birimleri çevirirken piksel ve rem dönüşümüne bakabilirsin. Düzene renk eklerken renk paleti işini kolaylaştırır. Önizlemedeki öğe sayısı yalnızca gösterim içindir; gerçek sayfandaki kutu sayısını etkilemez. Küçük ekranlar için sütun sayısını medya sorgusuyla azaltmayı unutma; üretilen kod masaüstü düzenini verir.