Əsas məzmuna keç
LibraTool logoLibraTool

Pulsuz CSS Grid Generatoru

CSS grid-i vizual olaraq dizayn edin — trekler, vahidlər və boşluqlar — və yaradılmış CSS və HTML-i kopyalayın.

Bir dəfə yükləndikdən sonra oflayn işləyir
Şablonlar
Sütunlar (3)
Sıralar (2)
Canlı önizləmə
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>

🔒 Hər şey tarayıcınızda işləyir — heç nə yüklənmir.

Necə İşləyir

Bir CSS torunu vizual olaraq dizayn edin: 8-ə qədər sütun və sətir əlavə edin, hər tərtibatı fr, px, auto, ya da min/max-content-ə təyin edin və sətir/sütun boşluqlarını tənzimləyin. Nömrələnmiş canlı önizləmə ani olaraq yenilənir, yaradılan grid-template CSS üstəlik uyğun HTML isə mübadilə buferinizdən bir klik uzaqlıqdadır.

  1. 1
    Toru formalaşdırın
    + və − ilə sütunlar və sətirlər əlavə edin/çıxarın.
  2. 2
    Tərtibatları təyin edin
    Hər sütun və sətir öz vahidini alır (1fr, 100px, auto…).
  3. 3
    Boşluqları tənzimləyin
    Ayrı sətir-boşluğu və sütun-boşluğu sürüşdürücüləri.
  4. 4
    Kodu kopyalayın
    İstehsal-hazır CSS və uyğun HTML skeleti.

Hər şey brauzerinizdə işləyir — heç nə yüklənmir.

Əlaqəli Alətlər

↔️

CSS Flexbox Generatoru

Flex istiqaməti, qapanma, haqlı və düzəltmə ilə canlı elementlər üzərində eksperiment edin — və CSS-i kopyalayın.

Sınayın
📐

CSS clamp() Generatoru

Responsive tipografiya və interval üçün axıcı CSS clamp() dəyəri yaradın. Min/maks ölçü və viewport aralığı təyin edin, canlı önizləmə görün və bir sətirlik CSS-i kopyalayın.

Sınayın
📓

Çap üçün kağız — Xətli, kvadrat, nöqtəli və not kağızı (PDF)

Öz kağızınızı çap edin: xətli (geniş və ya kollec xətli), kvadrat, nöqtəli, izometrik, xətt məşqi, not xətti və ya Cornell qeydləri; A4, Letter, A5 və ya Legal ölçüsündə, istənilən xətt rəngində, lazım olan qədər səhifə. Brauzerinizdə hazırlanan kəskin vektor PDF.

Sınayın

Tez-tez Verilən Suallar