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

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

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

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

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

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

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

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

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

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

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

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

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

.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;

}

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

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

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

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

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

وحدة كسرية

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

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

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

كرر لعدد ديناميكي من البطاقات

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

grid-template-columns: repeat(auto-fill, 250px);

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

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

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

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

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

كيف تجعل موقع WordPress الخاص بك مناسبًا للجوّال

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

التليفون المحمول

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

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

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

الحد الأدنى لعرض البطاقة هو 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

يحب مطورو WordPress الإضافات

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

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

هل أنت جاهز لتثبيت البرنامج المساعد الجديد المفضل لديك؟ دعنا نتعمق!

هل أنت جاهز لبرنامج تعليمي آخر لـ CSS؟ تحقق من هذه!

• كيفية الجمع بين شبكات Flexbox و CSS لتخطيطات فعالة
• كيفية استخدام نقاط توقف CSS لإنشاء تصميمات سريعة الاستجابة
• كيفية إنشاء رسوم متحركة SVG باستخدام CSS