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 دابنێ، و بۆشایی ڕیز/ستوون ڕێکبخە. پێشبینینی زیندووی ژمارەکراو دەستبەجێ نوێدەبێتەوە و CSSی grid-template دروستکراو پێکەوە لەگەڵ HTMLی هاوتا بە یەک کرتە لە کلیپبۆردتەوە بەردەستە.

  1. 1
    خشتەکە شێواز بکە
    ستوون و ڕیز زیاد بکە/لابدە بە + و −.
  2. 2
    تراکەکان دابنێ
    هەر ستوون و ڕیزێک یەکەی خۆی وەردەگرێت (1fr، 100px، auto…).
  3. 3
    بۆشاییەکان ڕێکبخە
    خشتەبەری جیاجیای بۆشایی-ڕیز و بۆشایی-ستوون.
  4. 4
    کۆدەکە کۆپی بکە
    CSSی ئامادەی بەرهەمهێنان و پێکهاتەی HTMLی هاوتا.

هەموو شتێک لە وێبگەڕەکەتدا ڕادەبات — هیچ شتێک بار ناکرێت.

ئامرازە پەیوەندیدارەکان

↔️

دروستکەری Flexbox CSS

ئاراستە، سڕینەوە، ڕێکخستنی flex، بەرەوپێش و ڕێکخستنی تاک لەسەر بابەتی زیندوو تاقی بکەرەوە — و CSS کۆپی بکە.

تاقی بکەرەوە
📐

دروستکەری CSS clamp()

بەهایەکی شلی clamp()ی CSS دروست بکە بۆ فۆنت و بۆشایی وەڵامدەرەوە. قەبارەی کەمترین/زۆرترین و مەودای ڕوانگە دیاری بکە، پێشبینینی زیندوو ببینە، و CSSی یەک هێڵی کۆپی بکە.

تاقی بکەرەوە
🧾

دروستکەری پسوولە

پسوولەیەکی پیشەیی دروست بکە و PDF ی پاک دایبگرە — بابەتی هێڵ، باج، داشکاندن، فرە-دراو. بێ خۆتۆمارکردن، بێ بارکردن، ڕەشنووس لۆکاڵی پاشەکەوت دەکرێت.

تاقی بکەرەوە

پرسیارە باوەکان