Grid veya Flexbox düzenini seç. Boşluk, yön ve hizalamayı önizle, CSS kodunu ücretsiz oluştur ve kopyala.
CSS Grid Oluşturucu nasıl çalışır?
CSS Grid iki boyutlu yerleşim kurar. Bu araç eşit genişlikte sütunlar, sabit yükseklikte satırlar ve ortak boşluk değeri üretir. minmax(0, 1fr) kullanımı uzun içeriklerin sütunun asgari genişliğini beklenmedik biçimde büyütmesini önler.
Hesaplama örneği
3 sütun ve 2 satır 6 hücre oluşturur. Boşluk 12, satır yüksekliği 80 seçildiğinde iki satırın toplam yüksekliği 172 px olur.
Sonucu değerlendirirken
Üretilen sınıfı kapsayıcı öğeye uygulayın. Çocuk öğeler kendiliğinden oluşturulmaz. Mobil kırılım ve özel grid alanları otomatik oluşturulmaz.
Flexbox oynatma alanı
Yerleşim alanında flex seçerek öğe sayısını, yönü, satır sarmayı, ana ve çapraz eksen hizalarını değiştirin. Flex-basis başlangıç boyutunu, grow artan alanın paylaşımını, shrink ise daralmayı belirler. Üretilen .flex sınıfını kapsayıcıya uygulayın; çocuk öğeleri kendi HTML belgenize ekleyin.
Önizleme 600 px genişliğinde ve en az 320 px yüksekliğindedir. Altı öğe, 120 px başlangıç boyutu, 12 px boşluk ve wrap seçimiyle satıra sığmayan öğeler alt satıra geçer. nowrap ve shrink 0 seçildiğinde taşma oluşabilir; önizleme alanı yatay kaydırılabilir. Sütun yönünde ana eksen düşeydir, justify-content buna göre çalışır. Önizleme boyutları CSS çıktısına sabitlenmez.
Sık sorulan sorular
Hangi bilgileri girmeliyim?
Sütun, satır, boşluk ve satır yüksekliğini belirleyin.
Sonuç nasıl hesaplanır?
Sütunlar repeat ile eşit paylara ayrılır. Toplam yükseklik = satır × yükseklik + satır arası boşluklar.
Örnekte hangi sonuç elde edilir?
3 sütun ve 2 satır 6 hücre oluşturur. Boşluk 12, satır yüksekliği 80 seçildiğinde iki satırın toplam yüksekliği 172 px olur.
Hesabın kapsamı nedir?
Üretilen sınıfı kapsayıcı öğeye uygulayın. Çocuk öğeler kendiliğinden oluşturulmaz. Flexbox modunda yön, sarma, hizalama ve öğe büyüme/küçülme katsayıları ayarlanır. Mobil kırılım ve özel grid alanları otomatik oluşturulmaz.