74. الشبكة الضمنية و auto-flow
الشبكة الصريحة (Explicit Grid) هي الهيكل الذي تحدده باستخدام grid-template-columns و grid-template-rows. الشبكة الضمنية (Implicit Grid) يتم إنشاؤها تلقائياً بواسطة المتصفح عندما يكون لديك عناصر أكثر مما يمكن للشبكة الصريحة استيعابه، أو عندما يتم وضع العناصر خارج المنطقة المحددة.
grid-auto-flow
تتحكم هذه الخاصية في كيفية تدفق العناصر الموضوعة تلقائياً في الشبكة الضمنية.
| القيمة | الوصف |
|---|---|
row (افتراضي) | يضيف صفوفاً جديدة لاستيعاب الفائض. |
column | يضيف أعمدة جديدة لاستيعاب الفائض (يتطلب تمريراً أفقياً إذا لم تتم إدارته). |
dense | يملأ الفجوات في هيكل الشبكة عن طريق نقل العناصر اللاحقة للأعلى، بغض النظر عن ترتيب المصدر. |
تحجيم المسارات الضمنية (grid-auto-rows / grid-auto-columns)
بما أن المسارات الضمنية يتم إنشاؤها أثناء التشغيل، فأنت بحاجة إلى تحديد حجمها.
css .auto-grid { display: grid; grid-template-columns: repeat(4, 1fr);
/* يضبط ارتفاع أي صفوف يتم إنشاؤها تلقائياً إلى 150 بكسل */ grid-auto-rows: 150px; }
حالة الاستخدام: عند التعامل مع محتوى من إنشاء المستخدم حيث يكون العدد الدقيق للعناصر غير معروف، فإنك تحدد الأعمدة صراحة وتترك الصفوف تُنشأ ضمنياً.