يشرح لك هذا الدليل كيفية اكتشاف شبكات CSS على الصفحة وفحصها وتصحيح الأخطاء في لوحة العناصر ضمن "أدوات مطوري البرامج في Chrome".
الأمثلة المعروضة في لقطات الشاشة التي تظهر في هذه المقالة مأخوذة من صفحتَي الويب هاتين: علبة الفاكهة وعلبة الوجبات الخفيفة.
استكشاف شبكات CSS
عند تطبيق display: grid أو display: inline-grid على أحد عناصر HTML على صفحتك، قد تظهر لك شارة grid بجانبه في لوحة العناصر.
انقر على الشارة لتفعيل عرض شبكة متراكبة على الصفحة. يظهر التراكب فوق العنصر، مخططًا كشبكة لإظهار موضع خطوط الشبكة والمسارات:
افتح لوحة التنسيق. عند تضمين الشبكات في صفحة ما، فإن جزء "Layout" (التخطيط) يتضمن قسم Grid (الشبكة) يحتوي على عدد من الخيارات لعرض تلك الشبكات.
محاذاة عناصر الشبكة ومحتواها مع Grid Editor (محرِّر الشبكة)
يمكنك محاذاة عناصر الشبكة ومحتواها بنقرة زر واحدة بدلاً من كتابة قواعد CSS.
لمحاذاة عناصر الشبكة ومحتواها:
في جزء العناصر > الأنماط، انقر على الزر
محرر الشبكة بجوار display: grid.
في Grid Editor (محرِّر الشبكة)، انقر على الأزرار المقابلة لضبط سمتَي
align-*وjustify-*CSS لعناصر الشبكة ومحتواها.
لاحظ عناصر الشبكة والمحتوى المعدَّل في إطار العرض.
خيارات عرض الشبكة
يحتوي قسم الشبكة في لوحة التنسيق على قسمَين فرعيَين:
- إعدادات عرض العناصر المركّبة
- عناصر مركّبة على الشبكة
لنلقِ نظرة على كل قسم من هذه الأقسام الفرعية بالتفصيل.
إعدادات عرض العناصر المركّبة
تتألف إعدادات العرض الذي يظهر على سطح الفيديو من جزأين:
a. قائمة منسدلة تضم الخيارات التالية:
- إخفاء تصنيفات الأسطر: يمكنك إخفاء تصنيفات الأسطر لكل تراكب على هيئة شبكة.
- عرض أرقام الأسطر: يمكنك عرض أرقام الأسطر لكل تراكب في الشبكة (يتم اختياره بشكل تلقائي).
- عرض أسماء الأسطر: يمكنك عرض أسماء الأسطر لكل تراكب شبكة في حال الشبكات التي تحمل أسماء خطوط.
b. مربّعات اختيار تتضمن خيارات ضمن:
- إظهار أحجام المقاطع الصوتية: التبديل لإظهار أحجام المقاطع الصوتية أو إخفائها.
- إظهار أسماء المناطق: يمكنك التبديل لإظهار أسماء المناطق أو إخفائها، في حالة الشبكات ذات مناطق الشبكة المسماة.
- تمديد خطوط الشبكة: يتم تلقائيًا عرض خطوط الشبكة داخل العنصر مع ضبط
display: gridأوdisplay: inline-gridعليه، وعند تفعيل هذا الخيار، تمتد خطوط الشبكة إلى حافة إطار العرض على كل محور.
لنلقِ نظرة على هذه الإعدادات بمزيد من التفصيل.
عرض أرقام الأسطر
بشكل تلقائي، يتم عرض أرقام الأسطر الموجبة والسالبة على تراكب الشبكة.
إخفاء تصنيفات الأسطر
اختَر إخفاء تصنيفات الأسطر لإخفاء أرقام الأسطر.
عرض أسماء الأسطر
يمكنك اختيار عرض أسماء الأسطر لعرض أسماء الأسطر بدلاً من الأرقام. في هذا المثال، لدينا أربعة أسطر بأسماء: يسار، ووسط1، ووسط2، ويمين.
في هذا العرض التوضيحي، يمتد العنصر البرتقالي من اليسار إلى اليمين، بـ CSS grid-column: left / right.
يؤدي عرض أسماء الأسطر إلى تسهيل تصور موضع بداية العنصر ونهايته.
إظهار أحجام قناة الإصدار
فعِّل مربّع الاختيار إظهار أحجام المسارات لعرض أحجام مسارات الشبكة.
ستعرض "أدوات مطوري البرامج" [authored size] - [computed size] في كل تصنيف سطر: الحجم مؤلِّف: الحجم المحدّد في ورقة الأنماط (تم حذفه في حال عدم تحديده). الحجم المحسوب: الحجم الفعلي على الشاشة
في هذا العرض التوضيحي، يتم تحديد أحجام أعمدة "snack-box" في لغة CSS grid-template-columns:1fr 2fr;.
لذلك، تعرض تصنيفات أسطر الأعمدة كلاً من الأحجام المكتوبة والمحسوبة: 1fr - 96.66px و 2fr - 193.32 بكسل.
تعرض تصنيفات أسطر الصفوف الأحجام المحسوبة فقط: 80px و80px بسبب عدم تحديد أحجام الصفوف في ورقة الأنماط.
إظهار أسماء المناطق
لعرض أسماء المناطق، فعِّل مربّع الاختيار عرض أسماء المناطق. في هذا المثال، هناك ثلاث مناطق في الشبكة: الأعلى وأسفل1 وأسفل2.
توسيع خطوط الشبكة
فعِّل مربّع الاختيار توسيع خطوط الشبكة لتوسيع خطوط الشبكة إلى حافة إطار العرض على طول كل محور.
عناصر مركّبة على الشبكة
يحتوي قسم تراكبات الشبكة على قائمة من الشبكات الموجودة على الصفحة، ولكل منها مربع اختيار، إلى جانب خيارات مختلفة.
تفعيل طرق عرض التراكب لشبكات متعددة
يمكنك تفعيل طرق عرض التراكب لشبكات متعددة. في هذا المثال، تم تفعيل نوعَين من طبقات الشبكة، وهما
main وdiv.snack-box، ويتم تمثيل كل منهما بألوان مختلفة.
تخصيص لون تراكب الشبكة
يمكنك تخصيص كل لون من ألوان تراكب الشبكة بالنقر على منتقي الألوان.
تمييز الشبكة
انقر على أيقونة الإبراز لتمييز عنصر HTML على الفور، وانتقل إليه في الصفحة وحدده في لوحة "العناصر".
