اريد مساعدتكم في موضوع مناقشة عن CSS Box Mode

الموقع المذكور يستخدم الخواص التالية من لغة CSS:

• CSS Flexbox

• CSS Grid Layout

• CSS Positioning والتي تتضمن 5 خيارات مختلفة: static, relative, absolute, fixed, and sticky.

ويتم استخدام الثلاث خواص السابقة لتشكيل هيكل أو الـ Layout الخاص بصفحة الموقع التي تريد إنشائها، وكمثال يمكن استخدام خاصية position: absolute لتحريك عنصر من الصفحة ووضعه بشكل عائم فوق بقية العناصر.

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

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  grid-gap: 1rem;
}

هذا الكود  ينطبق على عنصر HTML يحمل كلاس "wrapper".

وتعني الخاصية "display: grid" أن العنصر سيتم عرضه كشبكة، حيث يمكن تحديد عدد الأعمدة والصفوف فيها باستخدام الخاصية "grid-template-columns" والتي تحدد عدد الأعمدة وعرضها بالبكسل، مع إمكانية استخدام القيمة "auto-fill" لجعل العنصر يتكيف مع حجم الشاشة وعرض الأعمدة بناءً على ذلك.

كما تم استخدام الدالة "minmax" لتحديد الحد الأدنى والأقصى لعرض الأعمدة. حيث يجب أن لا تقل عرض العمود عن 250 بكسل في حالة عرض الموقع على الديسكتوب أو 100% من العرض في حالة تصفح الموقع من أجهزة الموبايل، وإذا كان حجم الشاشة أكبر سيزيد عرض العمود إلى "1fr" وهي قيمة تعني أن العرض سيتكيف بناءً على المساحة المتبقية في الشبكة.

وأخيرًا، يتم تحديد فراغ بين العناصر في الشبكة باستخدام خاصية "grid-gap" والتي تحدد الفراغ بالبكسل بين عناصر الشبكة، في هذا الكود تم تحديد فراغ بحجم 1rem وهي تعني 100% من الحجم الإفتراضي للخط وهو 16px إلا إذا تم تغيير الحجم الإفتراضي من خلال الكود أو من خلال عمل zoom داخل الصفحة.

ويمكنك قراءة المقالي التالي.