إنشاء لوحة ألعاب اللعبة التي قررت إنشائها هي واحدة من الألعاب المفضلة لدي إنها لعبة Jeopardy وهي موجودة منذ عام 1964 ولا تزال قوية ما تراه هنا هو مطور عبر الإنترنت يطلق عليه CodePen IO وما يمكنك القيام به هنا هو اختبار بعض التعليمات البرمجية الذي ستعمل معها ما فعلته هو إنشاء مستند HTML صغير يريد طباعة أربعة أعمدة ولهذا التصميم وهذه الدورة سوف نتعمق في قدرات فئة الشبكة وما سنكون قادرين على فعله هو وضع لوحة ألعاب سريعة الاستجابة في التصميم وأيضا جذابة للعيون كما ترى، على الجانب الأيسر من الشاشة في مستند HTML الخاص بي، لدي HTML بسيط مع قسم واحد يسمى فئة لدي قسم واحد من البرنامج مقسم إلى أربعة أعمدة ولدي فئتين هناك، أحدهما يسمى فئة الشبكة Grid class والآخر يسمى فئة العمود Column Class وسننظر في كيفية تصميم ذلك في CSS إذا نظرت إلى المنتصف، فهذه هي نافذة كود CSS لدينا بعض الأشياء الأساسية لقسم الجسم الخاص بنا ثم نحدد ما هي فئة الشبكة إذا نظرت بعناية في الدائرة الحمراء ستلاحظ أنني أقوم بإنشاء شيء يسمى عمود قالب الشبكة وأريد أربعة أعمدة، يشغل كل منها 25٪ من الشاشة المشكلة هي عندما أريد فصل تلك الأعمدة بشيء يسمى فجوة الشبكة grid gap وكما ترى في السطر 12 أقوم بتعيين فجوة الشبكة عند 10 بكسل وهذا يعطيني مسافة بين كل عمود ما يحدث مع أعمدة قالب الشبكة و 25٪ هو أنه لا يشمل الفجوة بين الأعمدة وبالتالي، فإنه ينشئ شريط تمرير أفقيًا شيء لا نريد رؤيته أبدًا إذا نظرت إلى الجانب الأيمن من النافذة التي تكون عادة محجوز لجافا سكريبت في هذه الشاشة بالذات، ليس لدينا أي منها باستخدام 25٪ يعطينا شريط تمرير أفقي في أسفل العمود الرابع بدلا من أربعة و 25٪ أقوم بتغيير طريقة إعداد أعمدة قالب الشبكة لقد غيرت الـ 25٪ لأقول إنني أرغب في استخدام كسر من المساحة المتبقية وما سنفعله هو أننا سنتعلم بالضبط كيف يعمل هذا الفكرة هي أنها ستحسب مقدار المساحة المتبقية وتضبط عرض العمود بدلاً من 25٪ سوف تخفض النسبة إلى 22 أو 23٪ لاستيعاب عرض الفجوات وهذا الكسر، كما ترون، 1fr سيسمح لي بالحصول على العرض الكامل لأربعة أعمدة ويقوم بتضمين الفجوات في عرض الصفحة دعونا نرى كيف يبدو ذلك عندما نصممه على لوحة ألعاب في هذه الحالة، ستكون فئاتنا تدور حول CSS والأشياء التي سنعمل عليها لدينا قيم الدولار على غرار الطريقة التي يمتلكها Jeopardy وسنقوم بترميز هذه اللعبة لجعلها تعمل كما يفعل Jeopardy مع القليل من التحريف من أجل تشغيل لوحة اللعبة هذه سنرغب في إنشاء واستخدام خاصية تحجيم المربع ما نريد فعله هو إنشاء ارتفاع وعرض الذي سوف نخصصهم لهذا المربع والتعامل مع كل ما بداخل المربع تتم إضافة الحدود والمساحة (الحشو) إلى العرض لإعطائنا حجم المربعات المعروضة على الشاشة وعلينا تعديل هذه القيمة مرة أخرى، كما قلت، إذا كان لدينا أربعة مربعات 25٪ لكل منها أي حشوة يمين أو يسار، لن تناسب سطر واحد ضمن قيود حاوية المربع تلك إذن ما نفعله هو تغييره بدلاً من استخدام مربع المحتوى وهو النسخة الافتراضية نريد تغييره إلى مربع الحدود وهذا يسمح للمتصفح بالعد من الحدود والحشو وعرض الفجوة وأي شيء آخر وسيتم تقليص حجم المستند تلقائيًا بحيث لا يكون هناك تمرير أفقي استخدام مربع الحدود يجعل الأمر أسهل مع أي عنصر يقضي على المشاكل مع عرض كل المحتوى الخاص بنا تحديد المواقع النسبي والمطلق يسمح لهذه القيم أن تكون ذات صلة بالمحتوى ومستقلة عن التغييرات في الحدود والحشو لذلك سنحصل دائمًا على أعمدة متساوية لا يهم ما نفعله لنلق نظرة على الكود الذي يولد مربع المحتوى هذا ومربع الحدود الأول، هذا المربع الأكبر لديها خاصية box-sizing الخاصة بنا لتعيينها على content-box سيكون المربع بعرض 160 بكسل وارتفاع 80 بكسل سيكون به مساحة متروكة تبلغ 20 بكسل والتي ستنقل الكلمات في مربع المحتوى 20 بكسل بعيدًا عن الحدود وسيكون له حد ثمانية بكسل إذا قمت ببعض العمليات الحسابية، فإن 160 بكسل للمربع بالإضافة إلى مجموعتي المساحة المتروكة أو الحشو، اليسرى واليمنى بالإضافة إلى مجموعتي الحدود، اليسرى واليمنى سيعطيك حقًا مربعًا بعرض 216 بكسل والشيء نفسه ينطبق مع الارتفاع بدلاً من قول مربع المحتوى نقوم بإنشاء فئة تسمى مربع الحدود يتم طرح هذه المساحة المتروكة من عرض المربع بالكامل ونحصل على مربع أصغر بكثير لماذا يعتبر ذلك ذو أهمية كبيرة؟ حسنًا، عندما يستخدم المستخدمون أنواعًا مختلفة من الأجهزة للوصول إلى الصفحات، نحتاج إلى توفير أكبر قدر من مساحة الشاشة قدر الإمكان وسيساعدنا استخدام مربع الحدود على القيام بذلك
