إعادة ترتيب أعمدة شبكة CSS

مقدمة

توفر CSS Grid نظام تخطيط مرن لمحتوى الويب، بما في ذلك القدرة على التحكم في ترتيب وموضع أعمدة. يتعمق هذا السؤال في تغيير ترتيب الأعمدة داخل شبكة CSS.

خاصية مناطق قالب الشبكة

إحدى الطرق لإعادة ترتيب أعمدة الشبكة هي عبر خاصية مناطق قالب الشبكة. يتيح لك ذلك تحديد مناطق معينة داخل الشبكة وتعيين أعمدة لتلك المناطق. على سبيل المثال:

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

سيؤدي هذا إلى نقل عنصر col3 إلى بداية الصف، متبوعًا بعنصر col1.

الموضع المستند إلى الخط

يمكنك أيضًا استخدام الموضع المستند إلى الخط للتحكم في ترتيب الأعمدة يتضمن ذلك وضع عناصر الشبكة واحدًا تلو الآخر على طول خطوط الشبكة، مع تحديد خصائص "grid-column-start" و"grid-column-end" موقعي البداية والنهاية.

على سبيل المثال، لتحديد موضع عنصر col3 بعد عنصر col1:

.col3 {
  grid-column-start: 2;
}

خاصية الطلب

تحدد خاصية الطلب ترتيب عناصر الشبكة داخل المسار. القيم الأقل من 0 تضع العنصر قبل بداية المسار، بينما القيم الأكبر من 0 تضعه بعد نهاية المسار.

لنقل عنصر col3 إلى الموضع الأول:

.col3 {
  order: -1;
}

وظيفة الكثافة

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

لنقل عنصر col3 إلى بداية الصف الثاني:

.my-grid {
  grid-auto-flow: dense 1fr;
}
.col3 {
  grid-column: 3;
  grid-row: 2;
}

من خلال تنفيذ هذه التقنيات، يمكنك إعادة ترتيب أعمدة الشبكة ديناميكيًا لتلبية متطلبات التخطيط المطلوبة على أحجام مختلفة للشاشة أو اتجاهات الجهاز.