كيف تجعل HTML الخاص بك مستجيبًا عن طريق إضافة سطر واحد من CSS

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

والجزء الأجمل: ستتم إضافة الاستجابة بسطر واحد من CSS.

هذا يعني أننا لسنا مضطرين إلى ازدحام HTML بأسماء فئة قبيحة (على سبيل المثال col-sm-4، col-md-8) أو إنشاء استعلامات وسائط لكل حجم شاشة.

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

الآن دعنا نقفز إليه!

وانشاء

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

ها هو HTML:

 1 2 3 4 5 6 

و CSS:

.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } 

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

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

لنبدأ بجعل الأعمدة متجاوبة.

الاستجابة الأساسية مع وحدة الكسر

تجلب CSS Grid معها قيمة جديدة بالكامل تسمى وحدة الكسر. وحدة الكسر مكتوبة frعلى هذا النحو ، وهي تسمح لك بتقسيم الحاوية إلى أي عدد من الكسور كما تريد.

دعنا نغير كل عمود ليكون عرض وحدة كسر واحد.

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px; } 

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

إذا قمنا بتغيير grid-template-columnsالقيمة إلى 1fr 2fr 1fr، فسيكون العمود الثاني الآن ضعف عرض العمودين الآخرين. العرض الكلي الآن هو أربع وحدات كسور ، والثانية تشغل اثنتين منها ، بينما تشغل الوحدات الأخرى وحدة واحدة. إليك كيف يبدو ذلك:

بمعنى آخر ، تجعل قيمة وحدة الكسر من السهل عليك تغيير عرض الأعمدة.

استجابة متقدمة

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

كرر()

سنبدأ repeat()بالدالة. هذه طريقة أكثر فاعلية لتحديد الأعمدة والصفوف. لنأخذ شبكتنا الأصلية ونغيرها إلى استخدام التكرار ():

.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px); } 

بمعنى آخر ، repeat(3, 100px)مطابق لـ 100px 100px 100px. حددت المعلمة الأولى عدد الأعمدة أو الصفوف التي تريدها ، والثانية تحدد عرضها ، لذلك سيعطينا هذا نفس التخطيط بالضبط كما بدأنا به:

احتواء تلقائي

ثم هناك احتواء تلقائي. دعنا نتخطى وجود عدد ثابت من الأعمدة ، وبدلاً من ذلك نستبدل 3 بها auto-fit.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); } 

ينتج عن هذا السلوك التالي:

تقوم الشبكة الآن بتغيير عدد الأعمدة بعرض الحاوية.

إنه يحاول ببساطة احتواء أكبر عدد ممكن من الأعمدة بعرض 100 بكسل في الحاوية.

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

الحد الأدنى - الحد الأقصى()

العنصر الأخير الذي نحتاجه لإصلاح هذا يسمى minmax(). سنقوم ببساطة باستبدال 100 بكسل بـ minmax(100px, 1fr). إليك CSS النهائي.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); } 

لاحظ أن كل الاستجابة تحدث في سطر واحد من CSS.

ينتج عن هذا السلوك التالي:

وكما ترى فإن هذا يعمل بشكل مثالي. و minmax()تحدد وظيفة حجم مجموعة أكبر من أو يساوي دقيقة وأقل من أو يساوي الحد الأقصى.

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

اضافة الصور

الآن الخطوة الأخيرة هي إضافة الصور. هذا ليس له علاقة بشبكة CSS ، لكن دعونا لا نزال نلقي نظرة على الكود.

سنبدأ بإضافة علامة صورة داخل كل عنصر من عناصر الشبكة.

لجعل الصورة تتلاءم مع العنصر ، سنقوم بتعيينها لتكون بعرض وطول العنصر نفسه ، ثم نستخدمها object-fit: cover;. سيؤدي هذا إلى جعل الصورة تغطي الحاوية بأكملها ، وسيقوم المتصفح بقصها إذا لزم الأمر.

.container > div > img { width: 100%; height: 100%; object-fit: cover; } 

والتي تنتهي على النحو التالي:

وهذا كل شيء! أنت تعرف الآن أحد أكثر المفاهيم تعقيدًا في CSS Grid ، لذا امنح نفسك ربتًا على الظهر.

دعم المتصفح

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

إذا كنت تريد أن تتعلم تصميم Flexbox و Grid والتصميم سريع الاستجابة مرة واحدة وإلى الأبد ، فيجب عليك التحقق من معسكر تصميم الويب سريع الاستجابة على Scrimba. سيستغرق الأمر مبتدئك للتقدم من خلال البرامج التعليمية التفاعلية التي يسهل متابعتها.

شكرا للقراءة! اسمي بير بورجن ، أنا المؤسس المشارك لـ Scrimba ، وهي منصة تعليمية تفاعلية لتعلم البرمجة.