محول مجاني

CSS Grid مولّد التخطيط

قم بإنشاء تخطيطات CSS Grid بصريًا مع معاينة مباشرة. اضبط grid-template-columns والصفوف والفجوات وجميع الخصائص — مجانًا من جانب العميل.

معاينة مباشرة
1
2
3
4
5
6
الأعمدة (repeat(3, 1fr))
الصفوف (repeat(2, 1fr))
column-gap (12px)
0px16px32px
row-gap (12px)
0px16px32px
justify-items
align-items
مخرجات CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  justify-items: stretch;
  align-items: stretch;
}

.item {
  padding: 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

حول هذه الأداة

قم بإنشاء المحتوى وتخصيصه باستخدام Css Grid Generator مباشرة في متصفحك. قم بتكوين تفضيلاتك، وقم بإنشاء المخرجات، وقم بتنزيل النتيجة أو نسخها. كل شيء يتم تشغيله من جانب العميل - تظل بياناتك خاصة وتتم المعالجة بشكل فوري.

كيفية الاستخدام

  1. قم بتكوين الإعدادات والخيارات لتتناسب مع متطلباتك.
  2. انقر فوق "إنشاء" لإنشاء الإخراج الخاص بك.
  3. قم بمعاينة النتيجة وإجراء التعديلات إذا لزم الأمر.
  4. قم بتنزيل ملف الإخراج أو انسخه إلى الحافظة الخاصة بك.

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

هل يمكنني تخصيص الإخراج الذي تم إنشاؤه؟
نعم. توفر الأداة خيارات تخصيص متنوعة لتخصيص الإخراج وفقًا لاحتياجاتك المحددة. اضبط الإعدادات قبل الإنشاء أو إعادة الإنشاء باستخدام خيارات مختلفة.
هل المحتوى الذي تم إنشاؤه مجاني للاستخدام؟
نعم. كل ما تنشئه باستخدام هذه الأداة هو ملكك لاستخدامه لأغراض شخصية أو تعليمية أو تجارية دون أي قيود أو متطلبات إسناد.
هل هذا يتطلب حساب؟
لا، الأداة جاهزة للاستخدام فورًا بدون تسجيل أو بريد إلكتروني أو تسجيل. فقط افتح الصفحة وابدأ في الإنشاء.
هل تظل بيانات الإدخال الخاصة بي خاصة؟
نعم. تتم كل المعالجة في متصفحك. لا يتم إرسال بيانات الإدخال والمخرجات التي تم إنشاؤها إلى أي خادم خارجي.