احسب خطوط الشبكة بدلاً من الخلايا المشغولة
اقرأ هدف الري في المستوى، ثم حدد الخطوط التي تُحيط بالمنطقة المطلوبة. يتم وصف موضع الشبكة بالحدود والمسارات؛ رقم الخط ليس مجرد رقم خلية ملونة. قبل إدخال CSS، حدد حدود البداية والنهاية التي تريدها. هذا التمييز البسيط يُسهّل توقع المنطقة التي ستغطيها القاعدة بدلاً من اكتشافها فقط بعد تحرك الماء.
عندما تستخدم مهمة ما نطاقًا، فكّر في عدد المسارات التي يجب أن تغطيها المنطقة. لا تُترجم ذلك مباشرةً إلى مسافة بكسل أو تُعيد استخدام قاعدة محاذاة Flexbox لمجرد أن كلا اللعبتين تتضمنان CSS. أدخل تغييرًا واحدًا في المحرر، ولاحظ المنطقة المروية وقارنها بالجزر أو الأهداف الأخرى المحددة في المستوى. المهمة الحالية هي التي تُحدد ما يُعتبر نجاحًا؛ فالمساحة الواسعة بصريًا ليست بالضرورة الحل المقصود.
استخدم شكل النتيجة لتشخيص القاعدة.
إذا بدأت المنطقة المروية في مكان خاطئ، فتحقق من حد البداية المُختار. إذا بدأت بشكل صحيح ولكنها انتهت مبكرًا جدًا أو متأخرًا جدًا، فتحقق من النهاية أو الامتداد. إذا تغيرت في الاتجاه الخاطئ، فتحقق من خاصية الصف أو العمود التي استخدمتها. يُساعدك تحديد الخطأ الهندسي على تحديد التعديل التالي بدقة، ويُجنبك استبدال عدة أجزاء صحيحة من القاعدة في وقت واحد.
بعد محاولة ناجحة، اشرح الخطوط التي أحاطت بالهدف وكيف حددتها القاعدة. هذا الشرح أكثر وضوحًا من سلسلة إجابات غير مترابطة، لأن المستويات اللاحقة قد تستخدم شبكة مختلفة أو تجمع القيود. يدعم هذا المركز حديقة CSS التفاعلية الفعلية وتعليمات مستوياتها. لا يضمن المركز توفير برنامج تعليمي لتصميم البكسل، أو شهادة خارجية، أو ورقة إجابات كاملة مُختبرة على جميع الإصدارات. استخدم صفحة التشغيل للتحكم في المحرر، ثم عد إلى هنا عندما تريد طريقة مركزة لمراجعة خطأ في تحديد الموضع.
على سبيل المثال، إذا كانت المياه تغطي مسارًا واحدًا أكثر من اللازم، ضع علامة على حدود النهاية المطلوبة وقارنها بالقيمة أو الامتداد الذي أدخلته. احتفظ بالبداية الصحيحة دون تغيير أثناء مراجعة النهاية. إذا انتقلت النتيجة إلى صف مختلف، فافحص قاعدة الصف بشكل منفصل عن قاعدة العمود. عندما يتم تغطية الهدف بشكل صحيح، قم بوصف الحدود والمسارات بالكلمات. يتمثل التمرين في ربط موضع CSS بالشبكة المرئية، وهو أمر مفيد في الترتيب الجديد حيث لم تعد سلسلة الإجابة السابقة تحدد المنطقة المقصودة.
نصائح واستراتيجيات Grid Garden
حدّد نصيحة للتدرّب عليها في الجولة المقبلة. هذه القائمة لا تغيّر اللعبة ولا تحفظ تقدّمك فيها.
أسئلة وأجوبة حول Grid Garden
ما هو الموضوع الذي يُدرّسه برنامج Grid Garden؟
يوفر هذا التطبيق تدريباً تفاعلياً على شبكة CSS من خلال ألغاز تصميم الحدائق.
هل أتحكم بشخصية متحركة؟
لا. التفاعل الرئيسي هو إدخال CSS الذي يغير موضع الشبكة.
ما هو المصدر الأصلي؟
يوفر Grid Garden الخاص بـ Thomas Park المصدر المرخص بموجب ترخيص MIT والعمل الفني CC BY 3.0 المستخدم في هذه النسخة التي تمت مراجعتها.
هل تغطي البداية عند الخط 2 والنهاية عند الخط 4 أربع خلايا؟
لا. يحدد grid-column-start: 2 وgrid-column-end: 4 المسافة بين الخطين 2 و4، أي مسارين من الأعمدة. خط النهاية حدّ، وليس خلية إضافية تُروى. احسب الفواصل بين الخطوط أو استخدم span 2، ثم افحص المساحة المظللة قبل تغيير موضع الصف أيضاً.