10 مقتطفات مفيدة لرمز شبكة CSS

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

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

يجب أن توفر هذه المجموعة الكثير من الموارد لمساعدتك في تعلم شبكات CSS وتخصيصها وإعادة تصميمها لأي شيء تفعله على الويب.

1. كتلة بطل متعدد الصور

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

قامت المطورة Rachel Andrew بإنشاء هذا باستخدام القليل من CSS المخصصة من مشاريعها الخاصة. إنه يعمل بشكل جيد للغاية ، والتصميم مستجيب تمامًا للتمهيد.

ناهيك عن أنه يبدو رائعًا على شاشات الجوال ؛ ليس شيئًا تجده دائمًا مع كتل الصور الكبيرة.

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

2. تخطيط شبكة CSS

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

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

إذا لم تكن متأكدًا مما يفعله هذا الرمز ، فتذكر فقط: Google هو صديقك! الكثير من المشاركات الرائعة وسلاسل Stack Overflow التي تغطي هذا الإعداد بالكامل.

3. حقائق القرع ليست مخيفة

إليك مقتطف رائع تم إنشاؤه باستخدام بعض حقائق اليقطين الأساسية. حسنًا ، حقائق القرع منظمة بواسطة تخطيط شبكة CSS.

يعمل الكود فعليًا على SCSS / Sass مما يعني أنك ستحتاج إلى بعض الإلمام باللغة التي تريد البحث فيها. ولكن يمكنك أيضًا تجميع كود Sass في CSS خام داخل CodePen مباشرةً إذا كنت تريد رؤية الخصائص الأساسية.

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

4. تخطيط سداسي تلقائي

ربما يكون هذا أحد أكثر المشاريع العملية التي وجدتها لهذا المعرض. ألق نظرة على نمط الشبكة هذا وحاول تغيير حجم المتصفح.

ستلاحظ إعادة تنسيق العناصر سداسية الشكل لتناسب الصفحة وفقًا لذلك. ربما تكون هذه هي أفضل طريقة للتعامل مع الصفحات المعقدة التي تحتوي على الكثير من الصور. غالبًا ما أرى هذا النوع من التخطيط على مواقع المؤتمرات وصفحات "عنا" للشركات التي بها الكثير من الموظفين.

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

5. Pokedex في CSS Grid

لم أر حتى الآن أي شيء إبداعي مثل Pokedex هذا في شبكة CSS. يعتمد على HTML و CSS مع القليل من JavaScript لملء أحجام الخلايا تلقائيًا.

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

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

6. شبكة بسيطة

إليك فكرة مثيرة للاهتمام حقًا تجلب أنماط تصميم الطباعة على الويب. ألق نظرة على هذا المثال على CodePen الذي يضم العديد من الأعمدة مع رؤوس وطباعة كبيرة الحجم.

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

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

7. شبكة CSS مع نظام Flexbox الاحتياطي

لم تلتحق جميع المتصفحات ببنية شبكة CSS. لهذا السبب يعلمك هذا المقتطف كيفية تصميم شبكة CSS مخصصة باستخدام flexbox (والعوامات) كإجراء احتياطي.

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

لن أسمي هذا حلًا احتياطيًا مثاليًا ، لكنه بالتأكيد أفضل من لا شيء.

8. عرض المصطلحات الشبكة

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

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

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

9. استخدام أعمدة شبكة القوالب: كرر ()

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

مرة أخرى ، لا يزال دعم المستعرض يلحق بهذا ولكن معظم متصفحات الويب الحديثة تعمل بهذه التقنية.

ناهيك عن أنك ستجد الكثير من التعليقات داخل CSS لمساعدتك على فهم ما يفعله هذا.

10. شبكة الكلمات المتقاطعة النقي CSS

لتنتهي بملاحظة ممتعة ، ألق نظرة على لغز الكلمات المتقاطعة الخالص لـ Adrian Roworth. هذا التخطيط بأكمله مبني على لا شيء سوى كود HTML و CSS ، وتحديداً خصائص شبكة CSS لهيكل التخطيط.

الأمر الأكثر جنونًا هو أنه يمكنك إدخال المحتوى في مربعات الكلمات المتقاطعة لحل الألغاز بالفعل. كم ذلك رائع!

لاحظ أن هذا الشيء معقد جدًا وهو أحد المشاريع القليلة المدرجة هنا غير الملائمة للجوّال. لكنه دليل على مدى تقدمنا ​​في تخطيطات الشبكة على الويب ، لذلك آمل أن نرى الكثير من هذا النوع من الأشياء في المستقبل القريب.