Ana içeriğe geç
LibraTool logoLibraTool

Ücretsiz CSS Grid Oluşturucu

Görsel olarak bir CSS grid tasarlayın — izler, birimler ve boşluklar — ve oluşturulan CSS ve HTML'yi kopyalayın.

Yüklendikten sonra çevrimdışı çalışır
Ön ayarlar
Sütunlar (3)
Satırlar (2)
Canlı önizleme
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Her şey tarayıcınızda çalışır — hiçbir şey yüklenmez.

Nasıl çalışır

Bir CSS ızgarasını görsel olarak tasarlayın: 8'e kadar sütun ve 8'e kadar satır ekleyin, her izi fr, px, auto veya min/max-content olarak ayarlayın ve satır/sütun aralıklarını düzenleyin. Numaralı canlı önizleme anında güncellenir; oluşturulan grid-template CSS'i ve eşleşen HTML panonuza bir tık uzaklıktadır.

  1. 1
    Izgaraya şekil verin
    + ve − ile sütun ve satır ekleyin/kaldırın.
  2. 2
    İzleri ayarlayın
    Her sütun ve satır kendi birimini alır (1fr, 100px, auto…).
  3. 3
    Aralıkları ayarlayın
    Ayrı row-gap ve column-gap kaydırıcıları.
  4. 4
    Kodu kopyalayın
    Üretime hazır CSS ve eşleşen HTML iskeleti.

Her şey tarayıcınızda çalışır — hiçbir şey yüklenmez.

İlgili araçlar

↔️

CSS Flexbox Oluşturucu

Flex yönü, sarma, yaslama ve hizalama ile canlı öğeler üzerinde deney yapın — ve CSS'i kopyalayın.

Deneyin
📐

CSS clamp() Oluşturucu

Duyarlı tipografi ve aralık için akışkan bir CSS clamp() değeri oluşturun. Min/maks boyutu ve görünüm alanı aralığını ayarlayın, canlı önizleme görün ve tek satır CSS'i kopyalayın.

Deneyin
📓

Yazdırılabilir Kâğıt — Çizgili, Kareli, Noktalı ve Nota Kâğıdı (PDF)

Kendi kâğıdınızı yazdırın: çizgili (geniş veya üniversite çizgili), kareli, noktalı, izometrik, el yazısı çalışması, nota çizgisi veya Cornell not kâğıdı; A4, Letter, A5 veya Legal boyutunda, istediğiniz çizgi renginde, ihtiyacınız kadar sayfa. Tarayıcınızda hazırlanan keskin bir vektör PDF.

Deneyin

Sık sorulan sorular