مشكلة النسب المئوية في CSS

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

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

مثال شبكة بسيط للغاية

لتوضيح مشكلة وحدات النسبة المئوية ، ضع في اعتبارك تنسيق HTML هذا:

<شعبةفصل="حاويةشبكتي">
 <شعبةفصل="عنصر الشبكة">
شعبة>
 <شعبةفصل="عنصر الشبكة">
شعبة>
شعبة>

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

جسم {
لون الخلفية: أسود;
محاذاة العناصر: مركز;
تبرير المحتوى: بداية مرنة;
}
.my-Grid {
عرض: شبكة;
شبكة-قالب-أعمدة: 50% 50%;
هامِش: 3rem;
حدود: 2مقصفصلبذهب;
حشوة: 1rem;
}
.grid-item {
حدود: 3مقصفصلبذهب;
حشوة: 10rem 0;
خلفية: أزرق;
}

لذلك كل عمود (عنصر الشبكة) له لون خلفية من الذهب. في فئة الوالد الحاوية ، قمنا بتعيين شبكة قالب العمود إلى 50٪ لكل عمود. نتيجة لذلك ، يحتل كلا الصندوقين 50٪ من العرض الإجمالي لعنصر الحاوية.

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

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

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

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

ذلك لأن كل عمود يمثل 50٪ من الأصل. في المثال أعلاه ، لدينا 50٪ بالإضافة إلى 50٪ بالإضافة إلى تلك الفجوة (3 بكسل) ، والتي تدفع الصندوق خارج الحاوية.

لاحظ أن هذا الخطأ لا يحدث فقط مع 50-50. يمكنك تعيين العمود الأول إلى 75٪ ، والعمود الثاني إلى 25٪ وسيظل الخطأ موجودًا. هذا هو السبب في أنك تحتاج إلى استخدام الحل التالي في كثير من الأحيان.

الحل بقيم كسرية

الحل هو استخدام القيم الكسرية بدلاً من النسب المئوية. لذا بدلاً من ضبط العمود الأول على 75٪ والثاني على 50٪ ، يمكنك ضبط العمود الأول على 3fr والعمود الثاني على 1fr:

شبكة-قالب-أعمدة: 3الاب 1الاب

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

ميزة أخرى لاستخدام frs على النسب المئوية - أو غيرها الوحدات المطلقة ، مثل px أو em—يمكنك دمجها بقيم ثابتة. هذا مثال:

أعمدة شبكة القوالب: 1fr 10rem ؛

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

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

مثال أكثر واقعية

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

.حاوية {
عرض: 100%;
عرض: شبكة;
شبكة-قالب-أعمدة: 3الاب 1الاب;
فجوة: 1.5rem;
}
.بطاقة {
لون الخلفية: # 5A5A5A;
حشوة: 10مقصف;
الهامش السفلي: .5rem;
}

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

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

إليك كيفية تكديس كل شيء في عمود عندما يصل إطار العرض إلى 55em أو أقل:

@وسائط(أقصى عرض: 55em) {
.حاوية {
عرض: ثني;
الاتجاه المرن: عمود;
 }
}

وستبدو النتيجة كما يلي:

الآن لا تريد أن تمتد كل بطاقة بعرض إطار العرض بالكامل. بدلاً من ذلك ، يجب أن يتم عرض البطاقات جنبًا إلى جنب. أفضل طريقة لتحقيق ذلك هي باستخدام شبكات CSS. ولكن بدلاً من تعيين قيم عرض ثابتة (مثل 50٪) لعمود قالب الشبكة ، استخدم ملف يكرر() تعمل على النحو التالي:

.sidebar-grid {
عرض: شبكة;
شبكة-قالب-أعمدة: يكرر(احتواء تلقائي, الحد الأدنى - الحد الأقصى(25rem, 1الاب));
محاذاة المحتوى: يبدأ;
فجوة: 2rem;
}

يعين CSS حجمًا أدنى يبلغ 25rem وحد أقصى للحجم يبلغ 1fr. هذا النهج أفضل بكثير من تحديد عروض ثابتة لأنه يعتمد على التحجيم الجوهري. بمعنى آخر ، يتيح للمتصفح اكتشاف الأشياء بناءً على المعلمات المتاحة.

الآن عندما تقوم بتقليل نافذة المتصفح إلى عرض معين ، فإن مربع الشبكة يعيد ضبط مربعين في كل سطر تلقائيًا.

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

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

تعرف على المزيد حول CSS Grid

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

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