المستخدمة مؤخرًا

    افتح أداة وستظهر هنا.

    مولد CSS Grid

    منشئ بصري لتخطيطات CSS Grid مع توليد الشيفرة

    مشاركة هذه الأداة

    الإبلاغ عن مشكلة

    صف المشكلة دون تضمين مدخلات أو ملفات خاصة.

    ما مدى فائدة هذه الأداة؟

    ما مدى فائدة هذه الأداة؟

    إعدادات التخطيط

    تخطيطات جاهزة

    موضع كل عنصر

    حدد عنصرًا في المعاينة أو في القائمة لتعديل خصائصه.

    مرجع سريع لـ CSS Grid

    مسارات الشبكة

    استخدم وحدات fr للمسارات المرنة، وpx أو % للمسارات الثابتة، وauto للمسارات التي يحددها محتواها.

    الدالة repeat()

    repeat(3, 1fr) اختصار لـ 1fr 1fr 1fr. استخدم auto-fill أو auto-fit للشبكات المتجاوبة.

    امتداد العناصر

    استخدم span N لتمديد العنصر على N من المسارات، أو 1 / -1 لتمديده على كل الأعمدة أو الصفوف.

    معاينة مباشرة

    شيفرة CSS المولّدة

    .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 10px;
}

    غيّر الإعدادات أو حدد عنصرًا. تتحدث المعاينة وشيفرة CSS معًا.

    عن مولد CSS Grid

    مولد CSS Grid أداة بصرية تفاعلية لتصميم تخطيطات CSS Grid وإنشائها. يُعد CSS Grid Layout أقوى نظام تخطيط ثنائي الأبعاد متاح في CSS، إذ يتيح تحديد الأعمدة والصفوف في آن واحد. توفر هذه الأداة أسلوبًا عمليًا للتعلم والتجربة وإنشاء شيفرة CSS Grid جاهزة للإنتاج.

    التصميم

    أضيفت حديثًا

    كل الأدوات

    إعدادات الخصوصية

    اختر تفضيلاتك للتحليلات والإعلانات والتخصيص. يُبقي التخزين الأساسي ميزات مثل المظهر والأدوات المحفوظة تعمل.

    التخزين الأساسي مفعّل دائمًا.