خاصية الوضع التلقائي للشبكة
آخر تحديث: 2026-09-13
grid-auto-flow خاصية الوضع التلقائي للشبكة
تتحكم خاصية grid-auto-flow في كيفية وضع عناصر الشبكة غير الموضوعة صراحةً تلقائياً. تقرر ما إذا كانت العناصر تُملأ حسب الصف أو حسب العمود، وما إذا كان وضع التعبئة الكثيفة (dense) مُفعّلاً لملء الفجوات في التخطيط. وللخاصية تأثير مباشر على ترتيب الشبكة العام.
| الفئة | |
|---|---|
| القيمة الأولية | row |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
grid-auto-flow: row | column | row dense | column dense;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
row | column | row dense | column dense | كلمة مفتاحية | اتجاه الوضع التلقائي والتعبئة الكثيفة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| grid-auto-flow | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تملأ row الشبكة صفاً بعد صف (الافتراضي)؛ و column تملؤها عموداً بعد عمود.
تلميح： تُفعّل الكلمة المفتاحية dense التعبئة الكثيفة: تتحرك العناصر الأصغر التي تأتي لاحقاً للخلف لملء الفجوات التي تركتها العناصر الأكبر، ولكن قد يتغير الترتيب المرئي.
❓ الأسئلة الشائعة
Qمتى يجب أن أستخدم الوضع الكثيف (dense)؟
Aاستخدم dense عندما تختلف أحجام العناصر ويترك الوضع التلقائي فجوات؛ فهو يسمح للعناصر الأصغر اللاحقة بالرجوع لملء الفجوات السابقة، مما يزيد الاستفادة من المساحة. ولكن dense يُبعد الترتيب المرئي عن ترتيب DOM، بينما تظل قارئات الشاشة والتنقل بلوحة المفاتيح تتبع DOM، لذا قد تقفز القراءة. كن حذراً في السياقات الحساسة لإمكانية الوصول.
Qكيف يبدو grid-auto-flow: column؟
Aيملأ العناصر أولاً العمود الأول من الأعلى إلى الأسفل، ثم ينتقل إلى العمود التالي، متدفقاً في اتجاه عمودي على الملء الافتراضي الذي يُعطي الأولوية للصفوف. مع column، تُنشئ العناصر الإضافية أعمدة ضمنية على اليمين بدلاً من صفوف ضمنية بالأسفل، وهو الاتجاه المطلوب للقوائم المرتبة أفقياً. ويناسب المحتوى الموجه حسب الأعمدة مثل تدفقات القراءة الرأسية والجداول الزمنية وأعمدة البطاقات المرتبطة. يمكنك أيضاً كتابة grid-auto-flow: column dense لتفعيل التعبئة الكثيفة أثناء الملء عموداً بعد عمود.
Qكيف أبني تخطيط masonry باستخدام CSS Grid؟
Aنهج شائع هو grid-auto-flow: row dense مع بطاقات بارتفاعات مختلفة تُعطى grid-row: span 2 أو span 3، مقترناً بـ grid-auto-rows لارتفاعات صفوف موحدة؛ فيملأ dense الفجوات. ولكن dense يُعطّل الترتيب المرئي/DOM ويؤثر على إمكانية الوصول. لاحظ أن تنفيذ grid masonry الأصلي لا يزال تجريبياً ومخفياً خلف علامة في بعض المحركات، لذا بالنسبة للمواقع الإنتاجية يظل column-count البديل الأكثر قابلية للنقل عندما يهم الحفاظ على الترتيب وتغطية المتصفحات.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
