⭐ 0
🔍
نص صورة قوات الدفاع الشعبي والمستندات الصوت الموسيقى الإلكترونيات الوقت المرافق المدققون الروحانيات ألعاب

الشريط الجانبي + تخطيط شبكة المحتوى CSS

تصميم تخطيطات شبكة CSS بشكل مرئي: قم بتعيين الأعمدة والصفوف والفجوات، ثم اكتب أسماء المناطق في الخلايا لإنشاء مناطق قالب الشبكة - مع معاينة مباشرة وCSS وHTML قابلة للنسخ.

اكتب اسمًا في أي خلية أدناه؛ يتم دمج الخلايا التي تحمل الاسم نفسه في منطقة مناطق قالب الشبكة واحدة.

جارٍ المعالجة... 0%

النتيجة

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

هذا هو الشكل الأكثر شيوعًا للتنقل بالإضافة إلى المحتوى على الويب - تعتمد صفحات الإعدادات ومواقع التوثيق ولوحات معلومات الإدارة على سكة ذات عرض ثابت بجانب منطقة رئيسية مرنة. نظرًا لأن عمود الشريط الجانبي يستخدم قيمة بكسل وعمود المحتوى يستخدم 1fr، يظل الشريط الجانبي بعرض ثابت بينما يمتص عمود المحتوى كل بكسل إضافي في إطار العرض.

قم بإعادة تسمية أي من المنطقتين، أو تغيير عرض العمود، أو إضافة المزيد من الصفوف لرأس أعلى التقسيم - يتتبع مخرجات CSS وHTML أدناه كل تعديل في الوقت الفعلي. الأداة مجانية وتستمر في العمل بالكامل في متصفحك، بدون تحميل أو حساب.

🛡️
يتم تنفيذها في المتصفح

ملفاتك ومدخلاتك لا تترك هذا الجهاز أبدًا. تتم المعالجة دون الاتصال بالإنترنت تمامًا. آمن بنسبة 100%.

التنسيقات والقواعد المقبولة

  • مدخلات رقمية لعدد من 1 إلى 6 أعمدة وصفوف، بالإضافة إلى عناصر التحكم المنفصلة في فجوة الأعمدة وفجوة الصفوف التي يتم دمجها في قيمة فجوة واحدة عند مطابقتها.
  • وضع المناطق المسماة: اكتب اسم المنطقة مباشرة في أي خلية بالشبكة المباشرة؛ تقوم الأداة بإنشاء سلسلة صالحة لمناطق قالب الشبكة وتحذر عندما لا تشكل الأسماء مستطيلات نظيفة.
  • كتلة CSS قابلة للنسخ (العرض: الشبكة، وأعمدة/صفوف قالب الشبكة، والفجوة، ومناطق قالب الشبكة) بالإضافة إلى هيكل HTML مطابق مع قسم منطقة شبكة واحد لكل منطقة محددة.

الفوائد الرئيسية

✓ اكتب اسمًا مباشرة في أي خلية، وسيتم دمج الأسماء المطابقة في منطقة مناطق قالب الشبكة واحدة - لا يوجد تحديد بالسحب، ولا يمكن تخمين بناء جملة السلسلة المقتبسة يدويًا.
✓ يتم تغيير حجم شبكة المعاينة المباشرة وإعادة تلوينها عند كل تغيير، بحيث يمكنك رؤية مسارات الأعمدة والصفوف الدقيقة وكل منطقة محددة قبل نسخ سطر واحد من CSS.
✓ تمنحك الإعدادات المسبقة مثل تخطيط الكأس المقدسة الكلاسيكي والشريط الجانبي الضيق إعلانًا حقيقيًا وفعالًا لمناطق قالب الشبكة للبدء منها بدلاً من الشبكة الفارغة.

حالات الاستخدام

  • • أنشئ غلاف صفحة الكأس المقدسة الكلاسيكي - رأس وتذييل كامل العرض مع صف وسطي للتنقل/الرئيسي/الجانبي - عن طريق كتابة أسماء المناطق بدلاً من مناطق قالب الشبكة المكتوبة بخط اليد.
  • • قم بتصميم صفحة الإعدادات أو لوحة تحكم المسؤول مع شريط جانبي ذو عرض ثابت بجوار عمود محتوى مرن وانسخ CSS وHTML الدقيقين بمجرد ظهور المعاينة المباشرة بشكل صحيح.
  • • تأكد من أن مجموعة المناطق المسماة تشكل في الواقع مستطيلات صالحة قبل الشحن - تحدد الأداة الأسماء الدقيقة التي من شأنها أن تؤدي إلى تقسيم مناطق قالب الشبكة في المتصفح.