Към основното съдържание
LibraTool logoLibraTool

CSS Grid генератор — безплатно

Визуално проектирайте CSS мрежа — записи, единици и празнини — и копирайте генерирания 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 генератор

Експериментирайте с flex посока, обвиване, justify и align на живите елементи — и копирайте CSS.

Опитайте
📐

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

Генерирайте течна CSS clamp() стойност за адаптивна типография и разстояния. Задайте минимален/максимален размер и диапазон на изгледния прозорец, вижте жив преглед и копирайте CSS на един ред.

Опитайте
📓

Хартия за печат — на редове, на квадрати, на точки и нотна (PDF)

Отпечатайте собствена хартия: на редове (широки или студентски), милиметрова, на точки, изометрична, за упражняване на почерк, нотен стан или бележки по метода Корнел, във формат A4, Letter, A5 или Legal, с произволен цвят на линиите и колкото страници ви трябват. Рязък векторен PDF, направен във вашия браузър.

Опитайте

Често задавани въпроси