إعادة ترتيب الأعمدة في تخطيط شبكة CSS

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

خيارات الحل:

1. مناطق قالب الشبكة: تتيح لك هذه الخاصية تحديد المناطق المسماة داخل الشبكة ثم تعيين عناصر الشبكة لتلك المناطق. باستخدام المناطق المسماة، يمكنك التحكم في تخطيط العناصر وترتيبها دون الاعتماد على ترتيبها الأولي في الكود المصدري.
2. الموضع المستند إلى الخط: باستخدام الموضع المستند إلى الخط، يمكنك استخدم خصائص Grid-column-* لتحديد العمود الذي يجب وضع العنصر فيه. من خلال تعيين عناصر الشبكة لأعمدة معينة، يمكنك التحكم في ترتيبها ومواضعها داخل الشبكة.
3. خاصية الطلب: تتيح لك خاصية الطلب تحديد الترتيب الذي تظهر به عناصر الشبكة، بغض النظر عن ذلك. من ترتيبها الأولي في التعليمات البرمجية المصدر. من خلال تحديد قيم الترتيب، يمكنك تحديد التسلسل المرئي للعناصر داخل الشبكة.
4. وظيفة التدفق التلقائي للشبكة: تعمل الوظيفة الكثيفة للتدفق التلقائي للشبكة على تحسين تخطيط الشبكة عن طريق ضبط موضع عناصر الشبكة تلقائيًا لملء المساحة المتوفرة بأكبر قدر ممكن من الكفاءة. يمكن استخدامه لتحقيق تخطيط الهاتف المحمول في السؤال، حيث يتم نقل العناصر إلى أسطر جديدة حسب الضرورة لاستيعاب حجم الشاشة الأصغر.

نموذج التعليمات البرمجية:

.container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-flow: dense; /* optimizes item placement */
}