Developer Tools
Web Utilitiesمصمم تخطيط الشبكة
مصمم مرئي لـ CSS Grid لإنشاء تخطيطات شبكية متجاوبة. قم بتخصيص الأعمدة والصفوف والمسافات وأنشئ كود CSS Grid جاهز للإنتاج فوراً.
تكوين الشبكة
قوالب البدء السريع
المصمم المرئي للشبكة
الكود المُنشأ
CSS
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
width: 400px;
height: 300px;
}HTML
<div class="grid-container">
</div>كيفية الاستخدام
تموضع الشبكة
1 / 2- starts at line 1, ends at line 21 / 3- spans 2 columns/rowsspan 2- spans 2 tracks from start position1 / -1- spans from first to last line
نصائح
- Use fr units for flexible columns
- Try different gap values for spacing
- Use span values for easier positioning
- Click cells to edit their properties
الأدوات ذات الصلة
حول مصمم تخطيط الشبكة
كيف يعمل
- قم بتكوين أبعاد الشبكة والمسافات
- أضف وضع الخلايا في المصمم المرئي
- حرّر محتوى الخلية واسم الفئة ولون الخلفية
- استخدم القوالب المحددة مسبقاً للبدء بسرعة
- انسخ أو نزّل كود CSS وHTML المُنشأ
حالات الاستخدام الشائعة
- تصميم ونمذجة تخطيطات المواقع الإلكترونية
- تعلم أساسيات CSS Grid
- إنشاء تخطيطات شبكية متجاوبة
- تصاميم لوحات التحكم وواجهات الإدارة
- أنظمة التخطيط القائمة على البطاقات
الأسئلة الشائعة
ما هو CSS Grid وكيف تساعد هذه الأداة؟
CSS Grid هو نظام تخطيط قوي يسمح لك بإنشاء تخطيطات معقدة ومتجاوبة بالصفوف والأعمدة. توفر هذه الأداة واجهة مرئية لتصميم تخطيطات الشبكة دون كتابة الكود يدوياً، ثم تنشئ CSS وHTML المقابلين.
كيف أحدد مواضع الشبكة لعناصري؟
تستخدم مواضع الشبكة تنسيق "البداية / النهاية" حيث تشير الأرقام إلى خطوط الشبكة. على سبيل المثال، "1 / 3" تعني البدء عند الخط 1 والانتهاء عند الخط 3 (يمتد عبر مسارين). يمكنك أيضاً استخدام "span 2" للامتداد عبر مسارين.
هل يمكنني إنشاء تخطيطات شبكية متجاوبة باستخدام هذه الأداة؟
نعم! تنشئ الأداة كود CSS Grid متجاوباً بطبيعته. يمكنك تعيين عرض الحاوية إلى "100%" للحصول على استجابة كاملة. للحصول على سلوك متجاوب أكثر تعقيداً، يمكنك دمج الكود المُنشأ مع استعلامات الوسائط.
ما هي التخطيطات المحددة مسبقاً وكيف أستخدمها؟
التخطيطات المحددة مسبقاً هي أنماط شبكية شائعة مثل رأس+محتوى+شريط جانبي، وشبكة لوحة التحكم، وتخطيط البطاقات. انقر على أي نموذج لتطبيق تكوينه فوراً ثم خصصه حسب الحاجة.
كيف أضيف أو أحرر أو أزيل عناصر الشبكة؟
انقر على "إضافة خلية" لإنشاء عناصر جديدة. انقر على أي خلية موجودة لتحديدها وتحريرها. عند تحديد خلية، يمكنك تعديل محتواها واسم فئتها وموضعها ولون خلفيتها.
ماذا تتحكم خيارات تكوين الشبكة؟
تعيين الأعمدة والصفوف عدد المسارات في شبكتك. تتحكم المسافة في التباعد بين العناصر. تعيين العرض والارتفاع الأبعاد الإجمالية للحاوية. اسم فئة الحاوية يعيّن فئة CSS للحاوية الرئيسية في الكود المُنشأ.
هل يمكنني تصدير تخطيط الشبكة لاستخدامه في موقعي؟
بالتأكيد! تنشئ الأداة كود CSS وHTML يمكنك نسخه أو تنزيله. يتضمن CSS جميع خصائص الشبكة الضرورية وتموضع العناصر. فقط انسخ الكود والصقه في مشروعك.
كيف أفهم المصمم المرئي للشبكة؟
يعرض المصمم المرئي معاينة حية لتخطيط شبكتك. تعرّف خطوط الشبكة المسارات، والمستطيلات الملونة تمثل عناصرك المرتبة وفق قيم grid-column وgrid-row. انقر على العناصر لتحديدها.
ما هي وحدات fr ومتى يجب استخدامها؟
تُوزّع وحدات fr (الكسرية) المساحة المتاحة بشكل متناسب في CSS Grid. تستخدم الأداة "repeat(n, 1fr)" افتراضياً للأحجام المتساوية. يمكنك تعديل CSS المُنشأ لاستخدام قيم fr مختلفة مثل "1fr 2fr 1fr".
هل يمكنني إنشاء تخطيطات معقدة بأسلوب المجلات؟
نعم! استخدم مواضع الشبكة المتداخلة لإنشاء تخطيطات بأسلوب المجلات. على سبيل المثال، عيّن عنصراً ليمتد عبر أعمدة وصفوف متعددة بينما تضع عناصر أصغر في الخلايا المتبقية.
هل كود CSS المُنشأ متوافق مع جميع المتصفحات؟
يعمل كود CSS Grid المُنشأ في جميع المتصفحات الحديثة (Chrome وFirefox وSafari وEdge) ومدعوم منذ عام 2017. لدعم المتصفحات القديمة، قد تحتاج إلى إضافة تخطيطات احتياطية باستخدام flexbox أو floats.
كيف أتعلم المزيد عن خصائص وتقنيات CSS Grid؟
هذه الأداة رائعة لتعلم CSS Grid من خلال التجريب! جرّب تكوينات مختلفة، وافحص الكود المُنشأ، وشاهد كيف تؤثر التغييرات على التخطيط. يشرح قسم المساعدة بناء جملة تموضع الشبكة.