كيفية إنشاء تخطيط بطاقة باستخدام CSS Grid Layout

ملاحظة المحرر: تمت كتابة منشور الضيف هذا بواسطة Abbey Fitzgerald ، وهو مهندس برمجيات UX ومصمم ويب يحب فن صياغة الكود.

تعمل CSS Grid Layouts على تغيير طريقة عمل مصممي الويب ، مما يتيح طريقة أكثر فاعلية لتخطيط محتوى موقع الويب.

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

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

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

أدوات تخطيط شبكة CSS

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

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

بطاقات بسيطة مع تخطيط شبكة CSS

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

البطاقات وتخطيط الصفحة العام

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

العمل مع عدد محدد من البطاقات

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

في هذا المثال (والمثال الآخر) ، توجد جميع عناصر .card داخل عنصر حاوية .cards . لإنجاز هذا ، الأمر بسيط جدًا.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

من المهم عرض قيمة .cards للشبكة. بدون هذا ، لا يمكن إنشاء مناطق الشبكة. الخطوة التالية هي تحديد grid-template-columns واختيار التصميم. سيتم الإعلان عن تصميم البطاقة الفعلي بفئة .card .

في هذا المثال ، سترى علامات مقالات متعددة بفئة .card . شاهده على Codepen.

كرر لمجموعة عدد البطاقات

هذا هو المكان الذي تبدأ فيه البطاقات في التبلور. لإنشاء كمية سائلة من الأعمدة لكل صف ، يتم استخدام التكرار مع وظيفة repeat() . تأخذ هذه الوظيفة وسيطتين: عدد مرات التكرار وقيمة التكرار.

على سبيل المثال ، grid-template-columns: repeat(3, 200px); يحسب grid-template-columns: 200px 200px 200px; .

الوحدة الكسرية

ستلاحظ أن رمز المثال يستخدم "fr". ما هذا بالضبط؟ أصبحت وحدة القياس هذه شائعة مع CSS Grid. تعني Fr "وحدة كسرية" وتشغل 1fr جزءًا واحدًا من المساحة المتاحة. يساعد في تبسيط حسابات الفضاء.

يمكن استخدام الوحدات الكسرية بمفردها أو أنها تسمح لك بتحديد عرض 1fr ويمكنك إضافة عناصر فرعية أيضًا. ستتم مشاركة الأب المتعددة بالتساوي عبر جميع العناصر التابعة.

يمكن تحديد وحدات كسرية مختلفة. على سبيل المثال ، عندما تكون أعمدة الشبكة 1fr 2fr 1fr ، فإن وحدتين كسريتين تشغلان ضعف المساحة كوحدة كسرية واحدة.

كرر للحصول على عدد ديناميكي من البطاقات

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

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

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

Minmax لمزيد من التحكم في عرض البطاقة

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

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

ستلائم الأعمدة الشبكة دائمًا وستكون البطاقات 200 بكسل على الأقل. عندما لا تتناسب المساحة الدنيا تمامًا مع المساحة ، فهذا هو المكان الذي يلعب فيه الحد الأقصى للعرض. عندما لا تتلاءم بطاقة عرض 200 بكسل أخرى ، ستكون البطاقات الأخرى أكبر من 200 بكسل ، لذا فهي تمتد لملء الصف بمساحة أكبر وسيتم توزيعها بالتساوي. [معرف المقالة = "21612 ″ محاذاة =" يمين "]

متحرك

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

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

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

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

فجوة الشبكة

الآن وقد تم تحديد عرض البطاقات ، يجب اتخاذ قرار بوجود مسافة بينها. تتوفر هذه الخاصية على حاويات شبكية وتجعل من السهل إنشاء المزاريب في التصميم. تخلق Grid-column-gap المسافة بين كل بطاقة. عندما ترى grid-gap ، فهذا يشير إلى الاختصار grid-row-gap وفجوة grid-column-gap . Grid-row-gap هي المساحة الموجودة أعلى البطاقة وأسفلها ، grid-column-gap هي المساحة الموجودة على يسار ويمين البطاقة.

موارد تخطيط شبكة CSS

عندما يتعلق الأمر بتخطيطات شبكة CSS ، هناك الكثير لتعلمه وهناك العديد من الاحتمالات. أفضل طريقة للتعرف على CSS Grid Layout هي القيام ببعض القراءة والتجربة الإضافية. هناك العديد من الموارد الرائعة ، ولكن إليك القليل منها لتبدأ:

• الشبكة بالمثال
• دورة CSS Grid Layout من Wes Bos
• Mozilla مقدمة لشبكة CSS