يتتبع مصور الشبكات والحاويات المرنة (Grid/Flex) أثر وتكوين كل حاويات الشبكة والمرنة من CSS داخل موقعك ويرسم هيكل تكوينها بتراكيب مرئية على الصفحة ذاتها. ليُظهر خطوط المسارات، مقاس التكوين والأعمدة، اتجاهات الـ Flex والمحاور، وتوزع المساحات — كل التركيبة من غير فتح أدوات مطوري الويب.
تعتبر CSS Grid والـ Flexbox أساس تخطيط الويب الحديث، لكنه مخفي افتراضيًا. لا يمكنك رؤية خطوط الشبكة، أو محاور الـ flex، أو قيم الفجوات بمجرد النظر إلى صفحة. تقدم أدوات مطوري المتصفح بعض ميزات تركيب الشبكات، لكنها تتطلب منك العثور على الحاوية في لوحة العناصر أولاً، وتمكين التراكب الخاص بها يدويًا، وعرض حاوية واحدة فقط في كل مرة. يعمل مصور الـ Grid/Flex على أتمتة ذلك كليًا — فهو يمسح الصفحة ويحدد كل حاوية Grid و Flex، ويقوم بعرض وتخيل هيكل تكويناتها بتراكبات وتظليلات بصرية. حاويات الـ Grid تُظهر خطوط الصفوف والأعمدة بمقاسات ومسافات مسجلة على الخط. تُظهر حاويات الـ Flex اتجاهات المحاور الرئيسية، والتفاف المحور الجانبي وتوضح كيف تتوزع المساحة. أما الفجوات (Gaps) فهي تُسلط الضوء بعصابات ملونة تظهر قيم البكسل فيها. انقر فوق حاوية ما لترى لوحة خصائص مفسرة تتضمن وصفًا شاملاً لكافة تفاصيل وبنود تخطيطها.
حاويات الـ Grid تظهر خطوطًا ملونة لتبين كل صف وعمود لمساره. كما تصحب مسميات توضح أحجام المسار (1fr, auto, 200px). أما أجزاء الفجوات بين العناصر تلون بخط نصف شفاف مبرزة القيم ببيانات البكسل، والتمييز بين الأعمدة الظاهرة وغيرها برقع متقطعة وأخرى صلبة.
تدل حاوية الـ Flex بواسطة سهم للمحاور (أفقي، عمودي، وغيرها) واتجاه المحور المعاكس وتوزع justify-content وتتمظهر ببيانات موازية تشرح كيف تقاسم الفضاء والمساحة من الأبناء.
تبحث الأداة بلمح البصر على الصفحة وترصد وتحصر كل شيء له display: grid أو display: flex (ومشتقاتها كالمخفية)، ويعرض مؤشر الشارة عدّادًا لعدد المكونات الموجودة. بدون تدخل بشري في انتقائها — سيتم عرضها وحصرها بالكامل.
انقر على أحد التكوينات ليفتح وتترجم كامل خواص الإنشاء المكون لها مثل: grid-template-columns/rows، و grid-gap، أو flex-direction وأيضاً بنود مساحات الأبناء (flex-grow، وغيرها من بنود الأساس).
كل عنصر ابن يُوجد في حاوية الشبكة أو المسار يُظهر قياس التشكيل الناتج وخواصه من الـ flex-grow/shrink والمساحة الكلية للشبكة ليُرصد تماماً فضاء التشغيل المأهول له.
ترصد حاويات الشبكة المحتوية بداخل حاويات شبكة ومرنة سياق التشكيل المستنسخ. يُرسم التكوين بمسارات ملونة ليُظهر عمق التخطيط المتفرع بصلب واحة التخطيط الكاملة.
يبدو العمود أعرض أو أضيق؟ التراكب يرصد الدقة للمسار بالحساب الرقمي 1fr بما يساويه كـ 342px كي تعي حجم المعايرة المعروض بحساب محرك العرض.
مالذي جعل العنصر أعرض من الآخر؟ تُرى بالمتخيل قيم flex-grow، و shrink للعنصر لاستنباط الفارق المرئي لمنطق الويب ومساحته.
غيّر مساحة عرض نافذة المتصفح لترصد التغير اللحظي للبيانات. ولاحظ انتقال grid-template-columns من تكوين مجزأ على سطح المكتب لعمود واحد عند عرض الهاتف المحمول.
زر أي موقع مُصمم لتلمح هندسته المدهشة باستشراف للتقويم المرئي وتعرف لتصور المقاييس (fr، وتعبئة الحجم وفضاء الاتجاه) لتطوير مداركك التعليمية.
تأكد من أنّ البطاقات تأخذ ذات التوزيع ونفس المقاس الجدولي وتلميح الأبعاد الفاصلة بينها لبيان النشاز مثل فرق 20px من 24px بأقسام متباينة.
انقر فوق محطة DevSuite Pro واختر أداة Grid/Flex Visualizer وسيمشط البرنامج تفاصيل الموقع لإدراك شبكة ومرجع التكوينات.
تحظى إطارات الشبكة بإبراز بصري لتكوين اللون وتُنظم بلائحة لمختلفها من الصنف واسم التصنيف المستهدف CSS.
اضغط لرؤية مكون حاوية يضم كافة مسارات العرض وتدابير المحور والأبعاد والالتحام الخاص بالشبكة.
يظهر كل مكون ابن بمعالم مقاسة وحصيلة بيانات من (flex-grow)، لمعرفة نصيب العرض والمكان.
انقر بضغطة أخرى للعودة لوضع المتصفح العادي وإلغاء شواخص الأدوات المقاسة.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.
