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