Үндсэн агуулга руу очих
LibraTool logoLibraTool

CSS торны үүсгэгч — үнэгүй

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 хүртэл мөр нэм, track бүрийг fr, px, auto эсвэл min/max-content болгон тохируул, мөр/баганын зайг тохируул. Дугаарлагдсан амьд урьдчилан харах шууд шинэчлэгдэж, үүсгэсэн grid-template CSS, тохирох HTML нэг товшилтоор clipboard дээр байна.

  1. 1
    Торыг хэлбэржүүлэх
    +, − -ээр багана, мөр нэмэх/хасах.
  2. 2
    Track-уудыг тохируулах
    Багана, мөр бүр өөрийн нэгжтэй (1fr, 100px, auto…).
  3. 3
    Зайг тааруулах
    Тусдаа мөр-зай, багана-зай гулсуур.
  4. 4
    Кодыг хуулах
    Гарган авахад бэлэн CSS, тохирох HTML араг яс.

Бүгд таны хөтчид ажилладаг — юу ч байршуулагддаггүй.

Холбоотой хэрэгслүүд

↔️

CSS flexbox үйлдвэрлэгч

Flex чиглэл, wrap, justify болон align-ийг амьд элементүүд дээр туршиж — мөн CSS-ийг хуул.

Туршиж үзэх
📐

CSS clamp() үүсгэгч

Хариу өгч буй типограф болон зайд зориулсан шингэн CSS clamp() утгыг үүсгэх. Хамгийн бага/их хэмжээ болон харах цонхны мужийг тохируулж, шууд урьдчилан харалтыг харан нэг мөр CSS хуулах.

Туршиж үзэх
📓

Хэвлэх цаас — Зураасан, тор, цэгэн, нотны цаас (PDF)

Өөрийн цаасаа хэвлээрэй: зураасан (өргөн эсвэл коллежийн), торлог, цэгэн, изометр, үсэг бичих дасгал, нотны шугам эсвэл Cornell тэмдэглэл; A4, Letter, A5 эсвэл Legal хэмжээтэй, дурын шугамын өнгөтэй, хэрэгтэй тооны хуудастай. Хөтөч дээрээ үүсгэсэн тод вектор PDF.

Туршиж үзэх

Түгээмэл асуултууд