شرح صفوف ومحتوى الفقرة
القيمة الافتراضية لخاصية grid-column-end هي auto، وتجعل العنصر يمتد لمسار عمود واحد فقط بعد خط بدايته. وعند استبدالها برقم موجب مثل grid-column-end: 4 مع بداية من الخط الأول، يتمدد العنصر ليملأ الأعمدة الثلاثة الأولى مع الفجوات الفاصلة بينها.
كما يمكنك تمرير اسم خط مخصص من القالب مثل grid-column-end: main-end، مما يحافظ على وضوح الكود واستقرار موضع النهاية حتى لو أضفت أعمدة جانبية جديدة لاحقاً.
CSS
.layout-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 12px;
}
.main-panel {
grid-column-start: 1;
grid-column-end: 4;
}