gridt: مصور دقيق لشبكة CSS وطبقة العناصر
gridt، التي أنشأها غافين كوندراث، هي إضافة لمتصفح كروم تقوم بإضافة أدلة CSS Grid لمساعدة في محاذاة التخطيط. تقوم بعرض أدلة أعمدة وصفوف قابلة للتعديل فوق الصفحات الحية حتى يتمكن المطورون من مقارنة الشيفرة مع التخطيطات المعروضة. تبرز الإضافة قوالب الشبكة المخصصة، وتحافظ على الطبقات خلال دورات التطوير، وتقدم مفاتيح تبديل عبر لوحة المفاتيح. تستهدف مطوري الواجهة الأمامية ومصممي واجهات المستخدم وتجربة المستخدم الذين يحتاجون إلى ردود فعل بصرية مباشرة ومتوافقة مع الشيفرة أثناء بناء تخطيطات الشبكة المتجاوبة في المتصفح.
ما المشكلة التي تعالجها الإضافة لعمل التخطيط؟
تضع الإضافة دليلًا بصريًا فوق صفحات الويب حتى يتمكن المصممون من مطابقة التعليمات البرمجية مع الشبكات المعروضة، مما يعالج المكونات غير المتوافقة والمسافات غير المتسقة عبر نقاط الانكسار. الغرض منها هو كشف خطوط الشبكة والمناطق مباشرة على الصفحة، مما يساعد في التحقق من محاذاة الأعمدة والصفوف دون الحاجة للتنقل بين لوحات المفتش وعرض الصفحة المباشر.
كيف تتصرف أثناء التطوير النشط وتحديثات الصفحة
تحافظ الإضافة على تراكبها عبر التحديثات وإعادة التحميل الساخن، مما يبقي الشبكة مرئية أثناء تعديل الأنماط أو إعادة بناء الأصول. يمكنها إرفاق التراكبات بعناصر DOM الفردية باستخدام محددات CSS، مما يسمح بفحص مركّز للتخطيطات المتداخلة بدلاً من الشبكات الكاملة فقط. يتم وصف الأداة بأنها خفيفة الوزن، لذا فهي تتكامل في سير العمل التكراري دون الحاجة إلى خطوة فحص منفصلة.
ما مدى قابلية تكوين الشبكة البصرية للتخطيطات المعقدة؟
تكشف الإضافة عن إعدادات للأعمدة والصفوف وفجوات الشبكة والهوامش الخارجية، بالإضافة إلى ألوان الخطوط القابلة للتعديل وعرض الخطوط لزيادة الوضوح على خلفيات متنوعة. تقبل قيم grid-template-columns وgrid-template-rows الصريحة، مما يسمح بتمثيل المسارات غير المتجانسة. تتيح اختصارات لوحة المفاتيح المخصصة للمستخدمين تبديل الرؤية بسرعة، مما يقلل من تبديل السياقات عند التحقق من تخطيطات أو حالات متعددة.
Gridt يناسب المطورين الذين يعملون مباشرة مع CSS Grid والمحددات
Gridt هو خيار عملي للمطورين والمصممين الذين يشعرون بالراحة عند تعديل قواعد CSS، لأنه يربط تعريفات الشبكة على مستوى الكود مع الصفحة المعروضة. الإضافة أقل ملاءمة للمستخدمين الذين يفضلون أدوات البناء المرئية بالسحب والإفلات. جرب واجهة وضع المطور لجلسات تصحيح الأخطاء النشطة واستخدم الاختصار القابل للتخصيص لإخفاء العناصر العائمة عند مشاركة الصفحات مع المعنيين.
