CSS Grid / Flexbox Oluşturucu

CSS Grid veya Flexbox düzenini görsel olarak oluştur. Satır/sütun, boşluk ve hizalamayı ayarla; genişliği önizleyip üretilen CSS ve HTML’yi kopyala.

Düzen kurallarını ve HTML’i kopyalar. Önizleme düğmeleri kullanılabilir genişliği sınırlar; medya sorgusu üretmez veya cihaz taklit etmez. Geçmiş en fazla 50 kayıt tutar. Önizleme renkleri örnektir.

Düzen Oluşturucu

Düzen Kontrolleri

Canlı Önizleme

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

CSS Kodu

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
}

.item-1 {
}

.item-2 {
}

.item-3 {
}

.item-4 {
}

.item-5 {
}

.item-6 {
}

HTML Kodu

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
  <div class="item-5">Item 5</div>
  <div class="item-6">Item 6</div>
</div>

İpuçları ve En İyi Uygulamalar

CSS Grid, 2D düzenler için mükemmeldir. Karmaşık sayfa düzenleri, kart ızgaraları ve satırlar ve sütunlarla hassas konumlandırma için kullanın.

Farklı ekran boyutlarına sorunsuzca uyum sağlayan düzenler oluşturmak için duyarlı kesme noktaları kullanın. Düzeninizi mobil, tablet ve masaüstünde test edin.

Bir düzen şablonu ile başlayın ve ihtiyaçlarınıza göre özelleştirin. Şablonlar, başlık/kenar çubuğu/ana, kart ızgaraları ve gezinme çubukları gibi yaygın desenleri içerir.

CSS Grid / Flexbox Oluşturucu

Düzen kurallarını bileşene yazmadan önce dene. Satır ve sütunlarla çalışmak için Grid, öğeleri tek satır veya sütun yönünde dizmek için Flexbox seç. Basit Grid örneğinde grid-template-columns değerini repeat(3, 1fr) yapıp üç eşit genişlikte sütunu incelemek için öğeler ekle.


Araç kapsayıcı ve öğelerin yerleşim kurallarını ve uyumlu HTML’yi üretir. Genişlik önizleme düğmeleri kullanılabilir alanı daraltır; medya sorgusu oluşturmaz veya cihaz taklit etmez. Önizlemedeki öğe renkleri örnektir. Çıktıyı projene yapıştır, kendi içeriğini ve görünüm stillerini ekle; desteklediğin genişliklerde davranışı kontrol et. Yerel çalışma alanı en fazla 50 geçmiş kaydı tutar.

Özellikler

  • CSS Grid ve Flexbox düzen kontrolleri arasında geçiş yap.
  • Satır/sütun veya yön, sarma, boşluk ve hizalamayı ayarla.
  • Öğeler ekle; tek öğenin Grid veya Flexbox yerleşim seçeneklerini değiştir.
  • Dar genişlikleri önizle, hazır örnekleri/geri alma geçmişini kullan ve CSS veya uyumlu HTML’yi kopyala.

Nasıl kullanılır

  1. Grid veya Flexbox seçip hazır örnek uygula ya da kapsayıcıyı yapılandır.
  2. Grid örneği için repeat(3, 1fr) sütunlar kullan ve birkaç satır görecek kadar öğe ekle.
  3. Boşluğu ve hizalamayı ayarla; mevcut önizleme genişliklerinde düzeni karşılaştır.
  4. CSS ve HTML’yi bileşenine kopyala. Gereken medya sorgularını kendin ekleyip gerçek içerikle test et.