تخطَّ إلى المحتوى الرئيسي
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
    اضبط الفجوات
    منزلقان منفصلان لـ row-gap وcolumn-gap.
  4. 4
    انسخ الكود
    CSS جاهز للإنتاج وهيكل HTML المطابق.

كل شيء يعمل في متصفحك — لا يُرفع أي شيء.

أدوات ذات صلة

↔️

مولد CSS Flexbox

جرّب اتجاه flex والالتفاف وضبط المحاذاة على عناصر مباشرة — وانسخ CSS.

جربها
📐

مولّد CSS clamp()

أنشئ قيمة CSS clamp() المرنة للخطوط والمسافات سريعة الاستجابة. حدّد الحجم الأدنى/الأقصى ونطاق نافذة العرض، وشاهد معاينة مباشرة، وانسخ سطر CSS الواحد.

جربها
📓

ورق قابل للطباعة — مسطّر ومربعات ونقاط ومتساوي القياس وورق موسيقي (PDF)

اطبع ورقك بنفسك: مسطّر (بتباعد واسع أو جامعي)، ورق رسم بياني، شبكة نقاط، متساوي القياس، تدريب على الكتابة اليدوية، حامل موسيقي أو ملاحظات Cornell، بمقاس A4 أو Letter أو A5 أو Legal، وبأي لون للخطوط، وبعدد الصفحات الذي تحتاجه. ملف PDF متجهي حاد يُنشأ في متصفحك.

جربها

الأسئلة الشائعة