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 ረድፎች ያክሉ፣ እያንዳንዱን ትራክ ወደ fr፣ px፣ auto ወይም min/max-content ያዘጋጁ፣ እና የረድፍ/የዓምድ ክፍተቶችን ያስተካክሉ። ቁጥር ያለው የቀጥታ ቅድመ-እይታ ወዲያውኑ ይዘምናል፤ የተፈጠረው የgrid-template CSS እና ተዛማጁ HTML ከቅንጥብ ሰሌዳዎ በአንድ ጠቅታ ርቀት ላይ ናቸው።

  1. 1
    ፍርግርጉን ይቅረጹ
    በ+ እና በ− ዓምዶችን እና ረድፎችን ያክሉ/ያስወግዱ።
  2. 2
    ትራኮቹን ያዘጋጁ
    እያንዳንዱ ዓምድ እና ረድፍ የራሱን አሃድ ያገኛል (1fr፣ 100px፣ auto…)።
  3. 3
    ክፍተቶቹን ያስተካክሉ
    የተለያዩ የrow-gap እና column-gap ተንሸራታቾች።
  4. 4
    ኮዱን ይቅዱ
    ለምርት ዝግጁ የሆነ CSS እና ተዛማጁ የHTML አጽም።

ሁሉም ነገር በአሳሽዎ ውስጥ ይሠራል — ምንም አይሰቀልም።

ተዛማጅ መሳሪያዎች

↔️

የCSS ፍሌክስቦክስ መፍጠሪያ

በቀጥታ ንጥሎች ላይ የፍሌክስ አቅጣጫ፣ መጠቅለያ፣ ማስተካከያ እና አሰላለፍ ይሞክሩ — እና CSS-ውን ይቅዱ።

ሞክሩት
📐

CSS clamp() ፈጣሪ

ለተስማሚ typography እና ክፍተት ፈሳሽ CSS clamp() እሴት ይፍጠሩ። ዝቅተኛ/ከፍተኛ መጠንና viewport ክልል ያዘጋጁ፣ ቀጥታ ቅድመ-እይታ ይመልከቱና አንድ-መስመር CSS ይቅዱ።

ሞክሩት
🧾

የክፍያ መጠየቂያ ጀነሬተር

ሙያዊ የክፍያ መጠየቂያ ይፍጠሩ እና ንፁህ PDF ያውርዱ — መስመር ንጥሎች፣ ግብር፣ ቅናሽ፣ ብዙ-ገንዘብ። ምንም ምዝገባ፣ ምንም ማሰቀል፣ ረቂቁ በአካባቢው ይቀመጣል።

ሞክሩት

ተደጋጋሚ ጥያቄዎች