شرح صفوف ومحتوى الفقرة
تستطيع توظيف الكلمة المفتاحية span منفردةً أو مقترنةً بخط بداية صريح داخل خاصية grid-row:
- تمدد تلقائي الموضع —
grid-row: span 2: يبقي البطاقة في موقعها التلقائي الطبيعي مع مضاعفة ارتفاعها لتشغل صفين متتاليين. - تمدد محدّد البداية —
grid-row: 2 / span 3: يثبّت انطلاق البطاقة عند الخط الأفقي2ثم يمدها لثلاثة صفوف متتابعة. تنقّل بين الأنماط الثلاثة في المختبر التفاعلي التالي:
CSS
.spotlight-card {
grid-row: span 2;
background-color: #ccfbf1;
border: 2px solid #0f766e;
}