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

مرحبا يا هبر! أقدم إليكم ترجمة المقال " كيفية جعل HTML الخاص بك متجاوبًا عن طريق إضافة سطر واحد من CSS " بواسطة Per Harald Borgen.



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

أروع شيء هو أنه لإضافة استجابة ستحتاج إلى كتابة سطر واحد من كود CSS

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

لقد أنشأت أيضًا دورة CSS Grid مجانية. انقر للحصول على حق الوصول الكامل إلى الدورة التدريبية .



لنبدأ!

تعديل

هذا ما تبدو عليه شبكتنا الأولية:



كود HTML:

<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> 

كود CSS:

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

ملاحظة: في المثال ، يوجد العديد من الأنماط الأساسية التي لن أضعها في الاعتبار هنا ، نظرًا لعدم ارتباطها بشبكة CSS.

لنبدأ بجعل الأعمدة سريعة الاستجابة.

الاستجابة الأساسية

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

تغيير قيمة أعمدة شبكة القالب إلى 1fr 1fr 1fr :

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

الآن تقسم الشبكة عرض الحاوية بالكامل إلى ثلاثة أجزاء. يأخذ كل عمود الجزء الخاص به (الوحدة). هذه هي النتيجة:



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



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

تحسين الاستجابة

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

كرر ()

لنبدأ بوظيفة التكرار (). هذه طريقة أكثر ملاءمة لتحديد معلمات الصفوف والأعمدة:

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

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



تناسب السيارات

بعد ذلك ، فكر في وظيفة الملاءمة التلقائية . استبدل العدد المحدد من الأعمدة بوظيفة الملاءمة التلقائية:

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

وهذا يؤدي إلى ما يلي:



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

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

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

minmax ()

آخر وظيفة نحتاج لإصلاحها تسمى minmax () . نحن فقط استبدال 100px مع 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 () نطاقًا من الأحجام أكبر من أو تساوي min وأقل من أو تساوي max.

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

إضافة الصور

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

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

 <div><img src="img/forest.jpg"/></div> 

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

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

هذه هي النتيجة:



هذا كل شئ! أنت الآن تعرف أحد أكثر المفاهيم تعقيدًا في CSS Grid.

دعم المتصفح

قبل أن ننتهي ، يجب أن أذكر أيضًا دعم المتصفح. في وقت كتابة هذا التقرير ، كان 92٪ من متصفحات الويب العالمية تدعم CSS Grid .

أعتقد أن إتقان CSS Grid أمر لا غنى عنه لمطور مطور أمامي.

لذلك تحقق من دورة CSS Grid الخاصة بي إذا كنت مهتمًا بهذا الموضوع.

شكرا للقراءة! اسمي Per ، أنا مؤسس مشارك لـ Scrimba (أداة لإنشاء رموز الشاشة التفاعلية).