Перайсці да асноўнага зместу
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, створаны ў вашым браўзеры.

Паспрабуйце

Часта задаюць пытанні