انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: خاصية grid-row مع Grid في لغة CSS

Two Axis Placement Summary دمج العمود والصف وجدول الأنماط

ادمج خط البداية العلوي وخط النهاية السفلي في سطر واحد مختصر عبر خاصية grid-row لبناء قوائم جانبية بكامل الارتفاع وبطاقات ممتدة بعدة صفوف وتموضع دقيق ثنائي الأبعاد.
5 صفوف تعليمية
لغة CSS
2,573 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يكتمل التموضع ثنائي الأبعاد في الشبكة عند الجمع بين grid-column للمحور الأفقي و grid-row للمحور الرأسي؛ وبذلك تستطيع تسكين أي بطاقة رئيسية أو قائمة جانبية في أي تقاطع تريده بدقة متناهية:

الصف 2 كود برمجي
CSS 
.featured-hero {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background-color: #ede9fe;
}
جرّب بنفسك
الصف 3 شرح توضيحي
صيغة اختصار grid-rowالمكافئ المفصل للبداية والنهايةالنتيجة البصرية في الشبكة
grid-row: 2بداية 2 ونهاية autoتسكين العنصر في الصف الثاني بارتفاع صف واحد
grid-row: 1 / 3بداية 1 ونهاية 3تغطية الصفين الأول والثاني معاً
grid-row: 1 / -1بداية 1 ونهاية -1امتداد كامل عبر جميع الصفوف الصريحة
grid-row: span 2بداية span 2 ونهاية autoمضاعفة ارتفاع البطاقة من موضعها التلقائي
grid-row: 2 / span 3بداية 2 ونهاية span 3الانطلاق من الخط 2 وتغطية 3 صفوف متتالية
الصف 4 ملاحظة هامة
الصف 5 ملاحظة هامة
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

أتقنت في هذا الدرس اختصار grid-row بالشرطة المائلة لملء كامل الارتفاع عبر 1 / -1، وتمديد البطاقات بـ span، وتجنب المسح الضمني، والتموضع ثنائي الأبعاد مع grid-column. في الخطوة التالية ننتقل إلى درس خاصية grid-auto-rows مع Grid في لغة CSS لضبط ارتفاع الصفوف الضمنية المتولدة تلقائياً.

جميع فقرات هذا الدرس (خاصية grid-row مع Grid في لغة CSS)