تعد شبكة CSS (CSS Grid) أحد أقوى أنظمة التخطيط ثنائية الأبعاد في تصميم صفحات الويب، حيث تتيح للمطورين تقسيم الصفحة إلى أعمدة وصفوف بدقة عالية. يسهل "مولّد شبكة CSS" عملية تصميم هذه الشبكات بصرياً، مما يغنيك عن كتابة الكود يدوياً لتحديد أبعاد المسارات وتوزيع العناصر.
يعمل هذا الدليل المرجعي على توضيح كيفية استخدام الأداة لإنشاء تخطيطات مخصصة، وفهم القواعد البرمجية التي تحكم توليد كود CSS وHTML.
إعدادات الشبكة والتحكم في المسارات
تتيح لك الأداة التحكم الكامل في هيكل الشبكة الأساسي من خلال تحديد عدد الأعمدة والصفوف وأحجامها:
- أعمدة: يمكنك تحديد عدد الأعمدة بقيمة تتراوح بين 1 و 12 عموداً.
- الصفوف يمكنك تحديد عدد الصفوف بقيمة تتراوح بين 1 و 12 صفاً.
- أحجام الأعمدة وأحجام الصفوف: يحتوي كل مسار (عمود أو صف) على حقل إدخال خاص به لتحديد حجمه. يقبل الحقل أي قيمة CSS Grid صالحة، مثل:
1fr(وحدة الكسر المرنة).200px(وحدات البكسل الثابتة).auto(التكيف التلقائي مع المحتوى).min-content(الحد الأدنى لحجم المحتوى).minmax(120px, 1fr)(تحديد حد أدنى وحد أقصى للحجم).
في حال إدخال قيمة غير صالحة في حقل حجم المسار (مثل not-a-grid-track)، يتم وضع علامة على حقل الإدخال بأنه غير صالح، ولكن مخرجات CSS تحتفظ بآخر قيمة صالحة تم إدخالها لتجنب تلف الكود.
ضبط الفجوات واختصار الكود
تسمح الأداة بضبط المسافات الفاصلة بين عناصر الشبكة بشكل مستقل:
- فجوة العمود: قيمة رقمية تتراوح بين 0 و 48px.
- فجوة الصف قيمة رقمية تتراوح بين 0 و 48px.
تخضع هذه القيم لقواعد تحسين الكود عند التوليد:
- دمج الفجوات: يتم تعيين فجوة العمود وفجوة الصف بشكل مستقل في الواجهة، ولكن عند توليد كود CSS، يتم دمجهما في خاصية
gapواحدة إذا كانت القيمتان متطابقتين. - تكرار المسارات
repeat(): لتجنب التكرار في كود CSS الناتج، يتم دمج المسارات المتجاورة التي تشترك في نفس الحجم تلقائياً باستخدام دالةrepeat()في كود CSS الناتج.
رسم العناصر وتوزيعها على الشبكة
تعتمد الأداة على التفاعل البصري المباشر لتوزيع العناصر الفرعية داخل الشبكة:
- طريقة الرسم: يتم الضغط والسحب عبر خلايا الشبكة لتحديد منطقة مستطيلة. عند إفلات زر الماوس، يتم إنشاء عنصر فرعي يمتد عبر الأعمدة والصفوف المحددة.
- الحد الأقصى للعناصر: تدعم الأداة رسم وتوليد ما يصل إلى 16 عنصراً كحد أقصى.
- تداخل العناصر: تتيح الأداة تداخل العناصر فوق بعضها البعض. في حال حدوث تداخل، فإن العنصر الذي تم رسمه لاحقاً يظهر في الطبقة الأعلى (فوق العناصر السابقة).
- إدارة العناصر:
- يؤدي النقر على زر "×" الموجود على العنصر إلى إزالته فوراً.
- يؤدي النقر على "إضافة عنصر" إلى توليد عنصر HTML جديد.
- يؤدي النقر على "مسح العناصر" إلى إفراغ حاوية HTML تماماً ليصبح عدد العناصر 0.
الإعدادات المسبقة للتخطيطات الشائعة
لتسريع عملية التصميم، توفر الأداة مجموعة من "الإعدادات المسبقة" الجاهزة التي تمثل الهياكل الأكثر استخداماً في تصميم المواقع:
| الإعداد المسبق | الوصف البرمجي والتوزيع |
|---|---|
| الشريط الجانبي | تخطيط كلاسيكي يتضمن عموداً جانبياً ثابتاً أو مرناً إلى جوار منطقة المحتوى الرئيسية. |
| رأس وتذييل الصفحة | هيكل رأسي يحتوي على منطقة علوية مخصصة للرأس (Header) ومنطقة سفلية للتذييل (Footer) مع مساحة المحتوى بينهما. |
| معرض | يولد هذا الإعداد تلقائياً شبكة مكونة من 3 أعمدة و 2 صفوف، ويوزع بداخلها 3 عناصر بشكل متناسق. |
| لوحة معلومات | تخطيط شبكي متقدم يناسب واجهات الإدارة وعرض البيانات والإحصائيات المجزأة. |
معالجة البيانات والخصوصية
تتميز الأداة بأنها تعمل بالكامل محلياً. يتم إنشاء شبكتك مباشرة في متصفحك، ولا يتم تحميل أي شيء قمت بتعيينه هنا على خوادم BroBroGo. تضمن هذه الآلية معالجة فورية للتغييرات دون الحاجة للاتصال بخادم خارجي لمعالجة الكود.
الأسئلة الشائعة
كيف أضع العناصر على الشبكة؟
اضغط واسحب عبر الخلايا لتحديد مستطيل — وعندما تتركه، يصبح عنصرًا فرعيًا موضوعًا يمتد عبر تلك الأعمدة والصفوف. يحصل كل عنصر ترسمه على قاعدتي grid-column وgrid-row في CSS وعنصر div مطابق في HTML. قد تتداخل العناصر، ويظهر العنصر المرسوم لاحقًا في الأعلى؛ استخدم × على أي عنصر لإزالته.
هل يمكن أن تكون الأعمدة والصفوف بأحجام مختلفة؟
نعم. لكل مسار حقل حجم مستقل يمكنك أن تكتب فيه أي قيمة للشبكة، مثل 1fr أو 200px أو auto أو min-content أو minmax(120px, 1fr). تُجمع المسارات المتساوية في repeat() ليظل الناتج مختصرًا. ويمكن ضبط فجوتي الأعمدة والصفوف كلٌّ على حدة، وتُختصران إلى قيمة gap واحدة عندما تتساويان.
ماذا أفعل بالكود الذي تم إنشاؤه؟
انسخ CSS وHTML جنبًا إلى جنب. يمنحك HTML الحاوية التي تحتوي على div واحد لكل عنصر، ويحدد CSS الشبكة ويضع كل عنصر. الصقهما في مشروعك وستحصل على نفس التخطيط الذي رسمته هنا.