كيفية التنسيق التلقائي للأعمدة باستخدام grid-template-columns في CSS

مصطفى اوريك · 7 سبتمبر 2021

ماذا يعني هذا الكود -كود CSS- :

 grid-template-columns:/* هذا الكود --> */ repeat( auto-fill,minmax(450px, 1fr) );

Hassan Hedr · 7 سبتمبر 2021

قيمة grid-template-columns تحدد نمط تنسيق الأعمدة في الشبكة

القيمة repeat(auto-fill, minmax(450px, 1fr)) توصف:

()repeat تكرار لنمط معين عدد من المرات، نمرر عدد مرات التكرار ثم القياس
- عدد مرات التكرار: auto-fill يعني أن نقوم بتكرار القياس اللاحق ليس بعدد ثابت من المرات وانما يكرر بأقصى عدد ممكن لملئ المساحة الأفقية
- القياس: ()minmax تحدد الحد الأدنى والأعلى للقياس
  - الحد الأدنى: 450px أي لن ينقص عرض العمود الواحد عن 450 بيكسل
  - الحد الأعلى: 1fr أي لا يوجد حد أعلى لعرض العمود يمكن للعمود ملئ كافة المساحة المتبقية

الناتج يكون عدد أعمدة تلقائي متناسق مع الأجهزة كافة بحيث كلما استطعنا وضع أعمدة بأقل عرض ممكن 450px يضاف عمود جديد يملئ المساحة المتوفرة

السؤال