Tasarım / Düzen

CSS Grid Oluşturucu (Görsel Grid-Template-Areas Oluşturucusu)

Sütunları, satırları ve boşluğu ayarlayın; header, sidebar ve main gibi adlandırılmış alanlar oluşturmak için hücreler üzerinde sürükleyin. Ardından grid-template-columns, grid-template-rows ve grid-template-areas içeren, yapıştırmaya hazır CSS'yi kopyalayın.

CSS Grid Oluşturucu (Görsel Grid-Template-Areas Oluşturucusu): İz boyutları, 200px 1fr 1fr gibi, yazdıkça eklenir ve tekrarlanan boyutlar repeat() hâline gelir. Her alan, grid-template-areas içinde bir ada dönüşür; boş hücreler için nokta kullanılır ve grid-area ile bir öğeyi yerleştiren bir kural oluşturulur. CSS'nin gerektirdiği üzere alanlar dikdörtgen olmalı ve üst üste binmemelidir; düzen bu tarayıcıda hatırlanır. Sunucuya hiçbir dosya yüklenmeden tarayıcınızda %100 yerel olarak çalışır.

Kategori
Geliştirici araçları
Çalıştırma sayısı
Tarayıcınızda
Maliyet
Ücretsiz · kayıt gerekmez
Kullanılabilirlik
Kullanıma hazır
CSS grid oluşturucuYerel işleme

Tamamen tarayıcınızda çalışır

Bir alan oluşturmak için hücreler üzerinde sürükleyin; alan birkaç satır ve sütuna yayılabilir. 1fr, 200px, auto veya minmax(100px, 1fr) gibi iz boyutları girin.

CSS

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
}

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Her alt öğeye ait olduğu alanın class değerini verin. Nokta olarak gösterilen hücreler boş kalır.

Adlandırılmış alanlar

grid-template-areas içindeki her dize bir satır, her sözcük bir hücredir: "header header" "sidebar main", başlığın her iki sütuna yayılmasını sağlar. grid-area: main değerine sahip bir alt öğe, main olarak adlandırılan her hücreyi doldurur. Adların sınıf adlarıyla eşleşmesi gerekmez; ancak aynı tutulmaları CSS'nin okunmasını kolaylaştırır.

Yaygın track boyutları

minmax(200px, 1fr), bir sütunu en az 200 px genişliğinde tutar ancak büyümesine izin verir; auto içeriğe uyar; repeat(auto-fill, minmax(12rem, 1fr)), sığdığı kadar sütun oluşturarak kart grid'leri için bir desen sunar. Aralık, CSS clamp oluşturucuyla akışkan hâle getirilebilir.

Nasıl kullanılır?

  1. Sütun ve satır sayısını seçin ve boyutlarını yazın.
  2. Alanlar oluşturmak için hücreler üzerinde sürükleyin ve alanları yeniden adlandırın.
  3. CSS'yi kopyalayın ve her alt öğeye kendi alanının class'ını verin.

Gizlilik ve sınırlamalar

Düzen tarayıcınızda oluşturulur.

İlgili araçlar

CSS clamp()Kutu GölgesiCSS BiçimlendiriciFlexboxClip path

Sık sorulan sorular

fr ne anlama gelir?

Boş alanın bir kesridir: 1fr 2fr, sabit boyutlar ve boşluklar çıkarıldıktan sonra ikinci sütunun ilk sütundan iki kat geniş olmasını sağlar.

Alanlar neden üst üste gelemez veya L şeklinde olamaz?

grid-template-areas yalnızca dikdörtgenleri kabul eder ve her ad bir kez kullanılabilir. CSS grid'de üst üste binen öğeler mümkündür; ancak bunlar adlandırılmış alanlar yerine açık satır numaraları gerektirir.

Duyarlı bir düzeni nasıl oluşturabilirim?

Geniş düzen için oluşturulan CSS'yi kullanın; dar ekranlar için bir medya sorgusu içinde grid-template-columns ve grid-template-areas değerlerini yeniden tanımlayın.

Ücretsiz araç · tarayıcınızda kez çalıştırma · hesap gerekmez