CSS Grid ile Flexbox arasındaki fark nedir?

CSS Grid, 2D düzenler (satırlar + sütunlar) içindir; Flexbox ise 1D düzenler (satır veya sütun) içindir. Grid, karmaşık sayfa düzenleri için daha uygundur.

fr (fraction), CSS Grid'de kullanılan orantılı bir birimdir. Örneğin, 1fr 2fr alanı 1:2 oranında böler. Duyarlı (responsive) düzenler için çok kullanışlıdır.

Medya sorgusu olmadan duyarlı bir ızgara kurabilir miyim?

Evet. repeat(auto-fit, minmax(240px, 1fr)) yazdığınızda yalnızca sütunun en küçük genişliğini sabitler, gerisini tarayıcıya bırakırsınız: görünüm alanı genişledikçe sütun eklenir, daraldıkça çıkarılır ve tek bir kesme noktası yazmadan telefondan masaüstüne kadar her yeri karşılar. Şuna dikkat edin: auto-fill artan alanda boş izler bırakır, auto-fit ise mevcut sütunları uzatarak onu doldurur; öge sayısı azken ikisi farklı sonuç verir.

Uzun bir kelime bir ızgara sütununu genişletip düzeni bozuyor.

Izgara ögelerinin en küçük boyutu varsayılan olarak auto'dur, yani içeriklerinin altına inmeyi reddederler; uzun bir adres ya da bölünemeyen bir kelime tüm sütunu açar. O ögeye min-width: 0 vermek ızgaranın onu yeniden küçültmesini sağlar, overflow-wrap: anywhere eklemek ise uzun dizgeyi alt satıra kaydırır. İzi düz 1fr yerine minmax(0, 1fr) olarak tanımlamak nedeni tümüyle ortadan kaldırır; bu yüzden çok yaygındır.

CSS Grid Oluşturucu

Ücretsiz çevrimiçi CSS Grid oluşturucu. Görsel düzenleyici ile satır, sütun, boşluk ayarlayın, otomatik kod oluşturma. Tarayıcıda işlenir.

Sütunlar: 3

Satırlar: 3

Boşluk: 10px

Öğeler: 9

Sütun Şablonu

Satır Şablonu

Yatay Hizalama

Dikey Hizalama

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

HTML Kodu

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

lockDosyalar hiçbir sunucuya gönderilmez

Paylaş

Göm

Bu aracı sitenize gömün

<iframe src="https://tools.patrache.studio/tr/css-grid-generator/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="CSS Grid Oluşturucu — Patrache Studio Tools"></iframe>
<p><a href="https://tools.patrache.studio/tr/css-grid-generator/">CSS Grid Oluşturucu</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

CSS Grid Oluşturucu; ızgara düzenlerini görsel olarak tasarlayan ücretsiz bir çevrimiçi araçtır.

CSS Grid Oluşturucu

CSS Grid Oluşturucu nasıl kullanılır?

CSS Grid Oluşturucu hakkında sık sorulan sorular

CSS Grid Oluşturucu etkili kullanım ipuçları

Bu sitede reklamlara izin verin

CSS Grid Oluşturucu

CSS Grid Oluşturucu nasıl kullanılır?

CSS Grid Oluşturucu hakkında sık sorulan sorular

CSS Grid Oluşturucu etkili kullanım ipuçları

İlgili Araçlar

Gölge Oluşturucu

Köşe Yuvarlaklığı

Yazı Tipi Eşleştirme