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

تخطيط شبكة Holy Grail CSS — كود جاهز

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

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

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

النتيجة

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

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

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

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

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

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

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

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

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

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

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