الفرق بين Guides وGrid layouts في تصميم الواجهات

قد تبدو الـ grid في أدوات التصميم مفهوماً واحداً، لكن Penpot يميز بين وظيفتين مختلفتين تماماً: Guides التي تعمل كمرجع بصري للمحاذاة، وGrid layouts التي تنظم العناصر تلقائياً وفق قواعد تخطيط محددة.

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

Guides: خطوط مرجعية والتحريك يبقى يدوياً

يسمي Penpot شبكات الخلفية باسم Guides. تظهر هذه الشبكات خلف التصميم لتساعد المصمم على وضع العناصر ومحاذاتها بالعين، لكنها لا تفرض ترتيباً على العناصر ولا تحركها تلقائياً.

يمكن لكل Board امتلاك Guides خاصة به، مع إمكان اختيار أكثر من نوع:

• شبكة مربعة، ويحدد الرقم حجم كل مربع بالبكسل.
• أعمدة، مع ضبط عددها وعرضها والمسافات بينها وهوامشها.
• صفوف، مع التحكم في عددها وارتفاعها والمسافات والهوامش.

يمكن أيضاً تغيير لون الـ Guides وشفافيتها، ودمج عدة Guides داخل Board واحد. هذه الطريقة مناسبة عندما تحتاج إلى مرجع دقيق لتخطيط يتم التحكم فيه يدوياً، مثل مخرجات الطباعة أو تصميمات الملصقات والكتب.

Grid layouts: قواعد تحكم موضع العناصر

أما Grid layout فلا تكون طبقة إرشادية في الخلفية؛ بل هي نظام تخطيط فعلي. يحدد المصمم الأعمدة والصفوف وأحجامها وgap وpadding، ثم تتدفق العناصر داخل الشبكة من دون إعادة محاذاتها يدوياً واحدة تلو الأخرى.

وفق Penpot، تمتلك Grid layouts أربع خصائص أساسية:

1. ترتيب العناصر يتم آلياً بناءً على قواعد الشبكة.
2. لا يلزم أن تتساوى الأعمدة في العرض أو الصفوف في الارتفاع، ويمكن مزج وحدات قياس مختلفة.
3. يمكن أن تكون responsive باستخدام وحدات مرنة مثل auto و% وfr.
4. تعتمد على مفاهيم CSS Grid، ويمكن أخذ خصائص أو كود CSS من لوحة Inspect ليتطابق الناتج مع التصميم في المتصفح.

لإنشاء Grid layout في Penpot، يختار المصمم Board أو مجموعة عناصر، ثم يضيف Layout من لوحة Design ويختار Grid layout. وإذا أضيفت الشبكة إلى عناصر موجودة، ينشئ Penpot عدداً من الأعمدة والصفوف يكفي لاستيعابها؛ أما الشبكة الفارغة فتبدأ افتراضياً بعمودين وصفين.

من الخلايا إلى المساحات المسماة

تتحول العناصر داخل Grid layout إلى Grid items، ويمكن ضبط محاذاتها وهوامشها بشكل مستقل أو جعلها تتمدد داخل الخلية.

وتتيح الأداة تحديد Grid cells لتشغل أكثر من عمود أو صف عبر خطوط البداية والنهاية. كما يمكن تحويل الخلية إلى Grid area وتسميتها؛ ويظهر الاسم فوق الشبكة وفي الكود، بما ينسجم مع خاصية CSS المسماة grid-area.

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

متى تختار كل خيار؟

الخيار ليس تنافساً بين ميزتين متشابهتين. استخدم Guides عندما تحتاج إلى خطوط تساعدك على المحاذاة اليدوية. واستخدم Grid layouts عندما تريد أن تدير قواعد التخطيط مواقع العناصر، خصوصاً مع التصميمات responsive أو المحتوى الذي تتغير كميته وأحجامه.

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