جعل الصفوف تمتد إلى أعمدة متعددة

يمكن تكوين الصفوف في CSS Grid لتشمل أعمدة متعددة باستخدام خصائص الشبكة المناسبة. إليك كيفية تحقيق ذلك:

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

الأسلوب الأكثر شيوعًا هو من خلال الموضع المستند إلى الخط، حيث تحدد خطوط بداية العمود ونهايته:

grid-column: 1 / 4;  // Spans columns 1, 2, and 3

منطقة الشبكة الصريحة:

استخدم خاصية منطقة الشبكة، التي تحدد بشكل صريح الخلايا المشغولة:

grid-area: 1 / 2 / span 3;  // Spans 3 columns from row 1, column 2

القيم السالبة:

يمكن استخدام القيم السالبة في عمود الشبكة أو بداية عمود الشبكة لليمين - الموضع إلى اليسار:

grid-column: -2 / -1;  // Spans the last 2 columns

تثبيت خط العمود:

تستخدم هذه التقنية تثبيت الخط لتوسيع نقطة نهاية الصف إلى المساحة المتاحة:

grid-column: auto;
grid-column-end: 100%;

التحجيم التلقائي مع الحد الأدنى:

يضمن التحجيم التلقائي مع الحد الأدنى للعرض أن الصف يشغل عددًا محددًا على الأقل من الأعمدة:

grid-column: auto;
min-width: 400px;

مثال:

لتمديد صف التنقل عبر جميع الأعمدة:

  

    ...
  
  ...

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.main-nav {
  grid-column: 1 / -1;  // Spans all columns
}

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