LibraTool logoLibraTool

Бесплатен Генератор на CSS Grid

Визуелно дизајнирајте CSS grid — колони, редови, единици и празнини — и копирајте го генерираниот CSS и HTML.

Работи офлајн откако ќе се вчита
Предефинирани
Колони (3)
Редови (2)
Преглед во живо
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>

🔒 Сè се извршува во вашиот прелистувач — ништо не се прикачува.

Како функционира

Дизајнирајте CSS мрежа визуелно: додадете до 8 колони и 8 редови, поставете секоја трака на fr, px, auto или min/max-content, и прилагодете ги растојанијата помеѓу редови/колони. Нумерираниот жив преглед моментално се ажурира и генерираниот CSS grid-template плус соодветниот HTML се едно кликнување од вашиот клипборд.

  1. 1
    Обликувајте ја мрежата
    Додавајте/отстранувајте колони и редови со + и −.
  2. 2
    Поставете ги траките
    Секоја колона и ред добива своја единица (1fr, 100px, auto…).
  3. 3
    Прилагодете ги растојанијата
    Одделни лизгачи за растојание меѓу редови и колони.
  4. 4
    Копирајте го кодот
    Готов за производство CSS и соодветниот HTML скелет.

Сè работи во вашиот прелистувач — ништо не се прикачува.

Поврзани алатки

↔️

Генератор на CSS Flexbox

Експериментирајте со насока, пренесување, порамнување и усогласување на елементи во живо — и копирајте го CSS-от.

Пробајте го
📐

Генератор на CSS clamp()

Генерирајте флуидна CSS clamp() вредност за одговорна типографија и растојание. Поставете мин/макс големина и опсег на приказ, видете преглед во живо и копирајте ја едноредна CSS.

Пробајте го
🧾

Генератор на фактури

Создадете професионална фактура и преземете чист PDF — ставки, данок, попуст, повеќе валути. Без регистрација, без прикачување, нацртот се зачувува локално.

Пробајте го

Најчесто поставувани прашања