شرح صفوف ومحتوى الفقرة
تثبيت رقم نهاية موجب مثل 5 يجعل الشريط العلوي عرضة للخلل فور تعديل عدد أعمدة الشبكة من 4 أعمدة إلى 3 أو 5 أعمدة. والحل الهندسي الأنظف هو استخدام القيمة السالبة grid-column-end: -1 التي تشير دائماً إلى آخر خط خارجي في الشبكة الصريحة.
عند الجمع بين grid-column-start: 1 و grid-column-end: -1 يمتد الشريط العلوي أو التذييل السفلي على كامل عرض الشبكة مهما تغير عدد أعمدتها، كما يمكنك البدء من الخط 2 مع النهاية -1 لملء بقية الصف بالكامل.
CSS
.page-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.top-banner {
grid-column-start: 1;
grid-column-end: -1;
}