Перейти до основного вмісту
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
    Налаштуйте проміжки
    Окремі повзунки row-gap і column-gap.
  4. 4
    Скопіюйте код
    Готовий до використання CSS і відповідний каркас HTML.

Усе працює у вашому браузері — нічого не завантажується.

Схожі інструменти

↔️

Генератор CSS Flexbox

Експериментуйте з напрямком flex, перенесенням, justify та align на живих елементах — і скопіюйте CSS.

Спробувати
📐

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

Генеруйте гнучке значення CSS clamp() для адаптивної типографіки та відступів. Встановіть мінімальний/максимальний розмір та діапазон вікна, перегляньте результат і скопіюйте однорядковий CSS.

Спробувати
📓

Папір для друку — у лінійку, у клітинку, у крапку та нотний (PDF)

Надрукуйте свій папір: у лінійку (широку або студентську), у клітинку, у крапку, ізометричний, для прописів, нотний стан або нотатки за методом Корнелла — у форматах A4, Letter, A5 чи Legal, будь-якого кольору ліній, із потрібною кількістю сторінок. Чіткий векторний PDF, створений у вашому браузері.

Спробувати

Часті запитання