ما هو الفرق بين auto fill و auto fit

"Auto-fill" و"Auto-fit" هما خاصيتان تستخدمان في تصميم واجهات الويب لتنسيق عناصر الشبكة (Grid) أو العناصر المرنة (Flexbox) تلقائيًا. وإليك الفرق بينهما:

Auto-fill
خاصية "auto-fill" تستخدم عادة في الشبكات (Grids) لتعبئة المساحة المتاحة بعناصر الشبكة بالحد الأقصى الممكن. عندما يتم تعيين خاصية "grid-template-columns" أو "grid-template-rows" إلى "auto-fill"، ستقوم العناصر بملء الشبكة أفقيًا أو عموديًا بشكل تلقائي، ويتم تكرار العناصر الموجودة لتناسب المساحة المتاحة.

Auto-fit
خاصية "auto-fit" تعمل بطريقة مشابهة لـ "auto-fill"، حيث تعبئة المساحة المتاحة بعناصر الشبكة أو العناصر المرنة. ولكن الفرق الرئيسي هو أن "auto-fit" يعمل على ضبط حجم العناصر لتناسب المساحة المتاحة دون إضافة عناصر إضافية. إذا كان هناك مساحة زائدة، فإن العناصر ستتقلص لتناسب المساحة، بينما إذا كان هناك نقص في المساحة، فإن العناصر ستتمدد لملء المساحة المتاحة.

"auto-fill" يستخدم لتكرار العناصر الموجودة لتعبئة المساحة المتاحة، بينما "auto-fit" يعتمد على تحجيم العناصر الموجودة لتناسب المساحة المتاحة دون إضافة عناصر إضافية.

تستخدم `auto-fit` عندما نريد تناسب أي عدد من الأعمدة في المساحة المتاحة. هنا، ستتمدد الأعمدة لتملأ المساحة. تذكر، ستتناسب الأعمدة التي قمنا بتعريفها فقط في المساحة المتاحة.

.container {
  grid-template-columns: repeat(auto-fit, minmax(100px, auto));
}

أما عند استخدام `auto-fill`، فإننا نريد تناسب أكبر عدد ممكن من الأعمدة في الصف. ولا يهم إذا كانت الأعمدة فارغة أو لا.

وهذا يعني أن `auto-fill` سيستمر في إضافة عمود جديد (أعمدة ضمنية)، حتى إذا لم يكن هناك محتوى كافٍ لملء الأعمدة الجديدة.

.container {
  grid-template-columns: repeat(auto-fill, minmax(100px, auto));
}

الفرق بين auto-fit و auto-fill

إلى حد ما، تعمل auto-fit و auto-fill بنفس الطريقة، ويتم الاختلاف الرئيسي فيما يتعلق بزيادة عرض المتصفح وكيفية توزيع عناصر الشبكة الجديدة في المساحة المتاحة.

نعلم أن auto-fill سيواصل ملء المساحة بأعمدة جديدة. ينشئ أعمدة ضمنية فارغة لملء المساحة المتاحة.

بينما يتعامل auto-fit فقط مع المحتوى المتاح. ولن يقوم بإنشاء أعمدة جديدة.

بمجرد وجود مساحة كافية لاحتواء عنصر شبكة آخر ، ستنشئ ال auto-fill عمودًا ضمنيًا وتناسب ذلك في المساحة المتاحة.

ولكن كما ترى ، لا تفعل ميزة ال auto-fit شيئًا من هذا القبيل. ماذا لو قمنا بزيادة المساحة أكثر؟ 

الصورة المرفقة بواسطة sushmita_singh

باختصار: 

• Auto fill: يُستخدم لوصف تعبئة العناصر أو التوزيع التلقائي للمحتوى في مساحة محددة. بحيث أنه يقوم بتعبئة المساحة المتاحة بالعناصر بشكل تلقائي حتى لا تبقى فراغات فارغة.
• Auto fit: يُستخدم لوصف ضبط حجم العناصر بشكل تلقائي لملاءمة المساحة المتاحة. بحيث أنه يقوم بضبط حجم العناصر بحيث تناسب المساحة المتاحة بدون تشويه أو تغيير النسب الأصلية للعناصر.

على سبيل المثال: إذا كان لديك معرض بشكل شبكة grid لعرض الصور، فيمكنك استخدام "Auto fill" لملء المساحة المتاحة بالصور بتوزيع تلقائي، بينما يمكنك استخدام "Auto fit" لضبط حجم الصور بحيث تتلاءم بشكل تلقائي داخل المساحة دون تشويهها.

ويمكننا القول إن "fit" يركز على ضبط حجم المحتوى ليتناسب مع المساحة المتاحة، بينما "fill" يركز على تعبئة المساحة المتاحة بالعناصر. فالأولى تهتم بمحتوى العنصر في حين أن الثانية تهتم بالعنصر نفسه.