احصل على شبكة معها: قم ببناء شبكة CSS الخاصة بك وقم بإسقاط الأطر

تبدأ رحلة كل مطور الواجهة الأمامية بمسار HTML و CSS و JavaScript الأساسي. تبدأ بالهيكل ، وتجعله يبدو لائقًا ، ثم تجعله يفعل شيئًا. ومع ذلك ، في مكان ما على طول الرحلة ، من السهل الوقوع في عالم أطر CSS والتستر على بعض التفاصيل الدقيقة.

يأتي Bootstrap جنبًا إلى جنب مع شبكته الجميلة اللطيفة ، باستخدام عدد قليل من الفئات وشبكة CDN لجعل هذه الشبكة الجميلة المستجيبة للجوال. وقبل أن تعرف ذلك ، تبدأ في الوصول إلى إطار العمل هذا كلما قمت بإنشاء مشروع يحتاج إلى تخطيط شبكي. كنت أفعل الشيء نفسه كثيرًا ، حتى بدأت "Gettin 'Griddy With It".

ما أرسلني إلى الطريق لتعلم CSS Grid كان عندما كنت أحاول إنشاء موقع باستخدام Semantic UI React (التمهيد الأجمل والأقل غموضًا.) ومع ذلك ، عند إنشاء شبكة ، لم أستطع جعل عمودين مستويين مع بعضهم البعض ، وانتهى بي الأمر بالعبث مع كل هامش وقاعدة حشو تحت الشمس ، لتجاوز الأنماط التي بني فيها إطار العمل. كانت تجربة محبطة ، وقضيت وقتًا أطول في العبث بقواعد الخصوصية أكثر من الترميز الفعلي.

وهنا يأتي دور CSS Grid. تعد CSS Grid إضافة جديدة نسبيًا إلى CSS3 وهي عبارة عن دوامة. تؤدي الحاجة إلى الانتقال إلى إطار عمل شبكة مستورد إلى بعض المشكلات:

  1. زيادة حجم الملفات. كلما زاد استيرادك ، أصبح تطبيقك أكبر. عندما تكون السرعة أمرًا أساسيًا ، فإن تقليل حجم ملف التطبيق الخاص بك يعد فكرة مهمة للغاية يجب مراعاتها. بدلاً من استيراد إطار عمل ، أو الاعتماد على CDN بطيء ، يمكنك إنشاء إطار عمل خاص بك.
  2. كود أقل قابلية للقراءة. أولئك الذين استخدموا إطار العمل يعرفون أسماء الفئات المعقدة والغامضة التي تأتي معها. من الذي لا يدرك على الفور ما class="col-6 col-md-4 col-sm-12"يمثل؟ أو من يريد أن ينتهي بالكتابة div.ui.segment.inverted.stackable.desktop.twelve.mobile.sixteenفي CSS؟
  3. تخصيص أقل. قد يكون من الصعب تجاوز القواعد المضمنة في إطار العمل. قد ينتهي بك الأمر بأسماء فئات طويلة للوصول إلى الخصوصية الصحيحة ، أو ينتهي بك الأمر بسطر بعد سطر من !importantالعلامات لإنشاء أنماط مخصصة تتجاوز إطار العمل. يكمن سحر شبكة CSS في أنه يمكنك صنعها بنفسك وتخصيصها وفقًا لاحتياجاتك ، بدلاً من الاعتماد على الآخرين الذين لم يضعوا في اعتبارهم تفاصيل مشروعك.

شبكة CSS سريعة الاستجابة

شبكة CSS هي في الأساس مجموعة من المربعات التي يمكنك وضعها في الصفحة. يمكنك إما استخدام وحدات الأرقام لتحديد حجم الصناديق ، أو استخدام الأحجام النسبية لجعلها أكثر استجابة. مع وجود مجموعة كبيرة ومتنوعة من أحجام الشاشات المتوفرة ، تعد هذه ميزة كبيرة. لنفترض أنك تريد إنشاء تخطيط من ستة أقسام وتريد أن تكون متجاوبة مع المزيد من الأعمدة لأحجام الشاشات المختلفة.

هذا ما يبدو غير منسق مثل ستة divsفي حاوية.

بدلاً من الاضطرار إلى إضافة فئات لكل نقطة من نقاط الفصل ، يمكنك تعيين الحد الأدنى لحجم div في الشبكة ، ثم الملء التلقائي باستخدام مربعات استجابة أكبر باستخدام frخاصية تغيير الحجم. ما عليك سوى إضافة خصائص CSS Grid للوالد ، وبعد ذلك small-boxسيتم ملء divs تلقائيًا.

CSS للحاوية على النحو التالي:

كما ترى ، يمكنك إنشاء شبكة استجابة بسيطة من أربعة أسطر فقط من التعليمات البرمجية. لا يمكن أن يكون الأمر أسهل ، وكل المحتوى الخاص بك مجاني للتنقل والخلط حسب الحاجة. لا توجد استعلامات وسائط ضرورية حتى في هذه الحالة. من هنا يمكنك تخصيص المربعات الفردية في الشبكة. إنه مرن تمامًا للتخطيطات والأحجام سريعة الاستجابة. العب معها وشاهد الصناديق تتحرك بطريقة سحرية.

مناطق الشبكة

السبب الآخر الذي يجعلني أميل إلى الوصول إلى شبكة إطار هو استخدامها لتخطيطات مختلفة على أجهزة مختلفة. قد ترغب في تحريك المكونات ، بناءً على حجم الشاشة الذي تعمل عليه.

يوجد أدناه مثال لتخطيطات الموقع التي قد تريدها على سطح المكتب والكمبيوتر اللوحي. تغيير هذا بسيط للغاية. على الرغم من أن البعض لا يحبون البنية ، إلا أنك تستخدم بنية قالب تشبه ASCII لمناطق الشبكة.

لنفترض أن لديك تخطيط صفحة أساسي يحتوي على رأس وأشرطة جانبية ومحتوى وتذييل.

سيبدو تخطيط الصفحة بدون تنسيقها بهذا الشكل مع شبكة أساسية مكونة من ثلاثة أعمدة مضبوطة على 1fr 4fr 1fr. سوف تملأ المربعات لتناسب المساحة المخصصة لها داخل الشبكة. ومع ذلك ، إذا كنت تريد أن يكون تخطيط صفحتك أكثر مرونة وديناميكية كما هو موضح أدناه ، فيمكنك استخدام template-areas.

من أجل الحصول على هذا التخطيط المطلوب ، تحتاج إلى إنشاء مناطق القالب. يمكنك التفكير في الأمر على أنه خريطة ASCII مصغرة توضح المكان الذي تريد أن تذهب إليه الصناديق على الصفحة.

من أجل الحصول على تخطيط سطح المكتب ، يمكنك إنشاء خريطتك المصغرة كما هو الحال في grid-template-areasالممتلكات. يحتوي كل سطر على صف وأسماء للأعمدة المقابلة للتخطيط. يمكنك أن ترى أن أقسام الرأس والتذييل ستمتد على طول الأعمدة التي يتم وضعها فيها. كما تمتد الأشرطة الجانبية والمحتوى عبر صفوف متعددة ، كما ترى في منطقة "الخريطة". يمكن بعد ذلك إجراء ذلك في أي تخطيط تحتاجه عن طريق إضافة grid-areaالخاصية إلى divs المقابلة مثل الصورة الموجودة في أقصى اليمين. يمكنك تسمية أي شيء يتوافق مع مشروعك.

لكي تعمل على عرض الجهاز اللوحي ، تحتاج ببساطة إلى إجراء استعلام عن الوسائط والتبديل حول الترتيب في مناطق القالب. تحرك بسهولة حول المحتوى للعرض الذي تريده. (لاحظ أن هذا قد يؤدي إلى مشاكل في برامج قراءة الشاشة إذا كان لديك محتوى خارج الترتيب ، لذا تأكد من أن المحتوى الخاص بك لا يزال يقرأ بشكل منطقي.)

استنتاج

من المؤكد أن هذا المنشور البسيط يخدش سطح ما يمكنك فعله باستخدام CSS Grid. لكنني أعتقد أن الشيء الرئيسي الذي يجب استبعاده من هذا هو أنه لا يجب أن تخاف من استخدام CSS Grid. إنه حقًا بسيط جدًا وقوي وخفيف الوزن بمجرد أن تعتاد على بناء الجملة الجديد. انطلق واستمتع بـ "Gettin 'Griddy With It".

لمزيد من المعلومات حول CSS Grid ، أوصي بشدة بفحص //cssgrid.io الذي يدرسه Wes Bos. إنه برنامج تعليمي رائع CSS Grid.

كما أن لديك أسئلة ، تأكد من إطلاعك على موقع CSS Tricks على //css-tricks.com/snippets/css/complete-guide-grid/ لمعرفة المزيد عن الشبكة.

للتحقق من المزيد من عملي ، قم بزيارة //theran.co ومعرفة المزيد عني.