69. وضع العناصر بواسطة أرقام الخطوط

بمجرد تحديد هيكل الشبكة، يمكنك وضع العناصر الفردية باستخدام خطوط الشبكة الرقمية. يتم ترقيم الخطوط بدءاً من 1 من حافة البداية للحاوية.

خصائص الموضع

مثال: تمديد الأعمدة

افترض شبكة بأربعة أعمدة (5 خطوط).

css .container { grid-template-columns: repeat(4, 1fr); }

.header-item { /* يبدأ من الخط 1 وينتهي عند الخط 5 (يمتد على كل الأعمدة الأربعة) */ grid-column-start: 1; grid-column-end: 5;

/* يوضع العنصر في الصف الأول (يبدأ عند 1، وينتهي عند 2) */ grid-row-start: 1; grid-row-end: 2; }

استخدام span لتحجيم العناصر

بدلاً من تحديد خط النهاية، يمكنك تحديد عدد المسارات التي يجب أن يمتد عليها العنصر باستخدام الكلمة المحجوزة span.

css .half-width-item { /* يبدأ من الخط 2 ويمتد على عمودين (ينتهي عند الخط 4) */ grid-column: 2 / span 2; }

الاختصار: grid-column: <بداية> / <نهاية>; و grid-row: <بداية> / <نهاية>;