73. التحجيم باستخدام minmax() و auto

يوفر Grid وظائف قوية لإنشاء أحجام مسارات مرنة ومقيدة في نفس الوقت، وهو أمر حيوي للتصميم المتجاوب.

1. الكلمة المحجوزة auto

عند استخدامها في grid-template-columns/rows :

• سياق البعد الثابت: إذا كانت المسارات الأخرى ثابتة، فإن auto تشغل المساحة المتبقية المتاحة.
• سياق المحتوى: إذا كانت جميع المسارات auto ، فسيتم تحديد حجم المسار بناءً على المحتوى داخل العناصر.

2. دالة minmax()

تحدد minmax(min, max) نطاق حجم لمسار الشبكة. لن يكون المسار أصغر من min ولا أكبر من max.

css .container { grid-template-columns: minmax(200px, 300px) /* العمود 1: دائماً بين 200 و 300 بكسل / 1fr; / العمود 2: يأخذ الكسر المتبقي */ }

حالة استخدام عملية: محتوى مرن

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

css .flexible-column { /* دائماً بعرض 300 بكسل على الأقل، ولكن يمكن أن يتمدد لملء بقية المساحة */ grid-template-columns: minmax(300px, 1fr) 1fr; }