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 торду визуалдык түрдө долбоорлоңуз: 8ke чейин мамыча жана сап кошуп, ар бир тректи fr, px, auto же min/max-content'ke коюп, сап/мамыча боштуктарын тууралаңыз. Номерленген тирүү алдын ала көрүү дароо жаңыланат, жараган grid-template CSS жана дал келген HTML алмашуу буферден бир басуулук аралыкта.

  1. 1
    Торду формалаңыз
    + жана − менен мамычаларды жана саптарды кошуу/алуу.
  2. 2
    Тректерди коюңуз
    Ар бир мамыча жана сап өз бирдигин алат (1fr, 100px, auto…).
  3. 3
    Боштуктарды тууралаңыз
    Өзүнчө sap-боштугу жана мамыча-боштугу сырганагычтары.
  4. 4
    Кодду көчүрүңүз
    Продакшнга даяр CSS жана дал келген HTML скелети.

Баары браузериңизде иштейт — эч нерсе жүктөлбөйт.

Байланыштуу куралдар

↔️

CSS Flexbox генератору

Жандуу элементтерде flex багытын, оролушун, тегиздөөнү сынап көрүңүз — жана CSS кодун көчүрүп алыңыз.

Байкап көрүңүз
📐

CSS clamp() генератору

Ыкчам типография жана боштуктар үчүн ийкемдүү CSS clamp() маанисин жаратыңыз. Мин/макс өлчөмдү жана көрүнүш аймагы диапазонун коюп, түз алдын ала көрүңүз жана бир сапта CSS-ти көчүрүп алыңыз.

Байкап көрүңүз
🧾

Эсеп-фактура генератору

Кесипкөй эсеп-фактура түзүп, таза PDF катары жүктөп алыңыз — сап статьялары, салык, арзандатуу, көп валюта. Каттоо жок, жүктөө жок, долбоор жергиликтүү сакталат.

Байкап көрүңүз

Көп берилүүчү суроолор