مولد شبكة CSS

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

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

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

يحل كل من Grid و flexbox مشكلات التخطيط المختلفة، ويُعد مولد css-flexbox الموجود على هذا الموقع نقطة انطلاق أفضل للتخطيطات أحادية البعد - صف واحد أو عمود من العناصر المرنة مثل شريط التنقل أو مجموعة من البطاقات. يمكنك الوصول إلى منشئ الشبكة هذا بدلاً من ذلك عندما تحتاج إلى تحكم ثنائي الأبعاد، أو صفوف وأعمدة واضحة، أو مناطق محددة مثل الرأس/التنقل/الرئيسي/التذييل؛ غالبًا ما تنتهي الأداتان في نفس الصفحة، شبكة لغلاف الصفحة ومربع مرن داخل أجزائها. مثل كل الأدوات الموجودة على هذا الموقع، يتم تشغيلها بالكامل في متصفحك - بدون تحميل أو حساب.