87. شبكة متجاوبة باستخدام auto-fit و minmax()

يوفر CSS Grid حلاً أنيقاً بشكل لا يصدق لإنشاء تخطيطات بطاقات أو معارض متجاوبة وذاتية التعديل دون استخدام استعلام وسائط واحد. يتم تحقيق ذلك باستخدام دالة repeat() جنباً إلى جنب مع minmax() و auto-fit.

صيغة العمود ذاتي التعديل

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

css .responsive-gallery { display: grid; gap: 1.5rem;

grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) /* الحجم الأدنى 300 بكسل، الحجم الأقصى كسر واحد */ ); }

التحليل

1. repeat(...): يحدد نمطاً متكرراً للأعمدة.
2. auto-fit: يخبر المتصفح بحساب عدد الأعمدة من الحجم المحدد التي يمكن أن تتسع في الشاشة الحالية.
3. minmax(300px, 1fr):
   • إذا كانت المساحة المتاحة تسمح بثلاثة أعمدة من 300 بكسل، فسيقوم المتصفح بإنشاء ثلاثة أعمدة.
   • يضمن الـ 1fr توزيع أي مساحة متبقية (مثل 50 بكسل) بالتساوي عبر تلك الأعمدة، مما يجعلها أعرض قليلاً من 300 بكسل.
   • إذا انكمشت الشاشة ولم يتسع سوى لعمودين، فسيتوسع هذان العمودان لملء 100% من عرض الحاوية حتى يصلا إلى حد الـ 300 بكسل، ثم يبدآن في الالتفاف أو الانكماش (بسبب الـ 1fr).

auto-fill مقابل auto-fit: تقوم auto-fill بإنشاء مسارات فارغة إذا توفرت المساحة. أما auto-fit فتقوم بطي المسارات الفارغة، مما يسمح للعناصر بالتوسع بالكامل. يُفضل استخدام auto-fit عادةً للتخطيطات القائمة على العناصر.