في هذا الدرس 5تصفّح المواضيع
بدلاً من تكرار سطرين منفصلين لخاصيتي grid-row-start و grid-row-end على كل بطاقة، توفّر لغة CSS خاصية الاختصار المباشرة grid-row باستخدام الشرطة المائلة / للفصل بين البداية والنهاية.
في الصيغة القياسية grid-row: start / end تحدد القيمة المكتوبة قبل الشرطة خط الانطلاق العلوي، بينما تحدد القيمة المكتوبة بعد الشرطة خط التوقف السفلي كما يوضح المخطط التالي:
يبرز نمطان عمليان لاختصار الخطوط في أغلب لوحات التحكم والمجلات الرقمية الحديثة:
- حصر العنصر بين خطين —
grid-row: 1 / 3: يثبّت العنصر من الخط الأفقي الأول حتى الثالث ليغطي أول صفين بدقة. - ملء كامل الارتفاع الصريح —
grid-row: 1 / -1: يمد القائمة الجانبية من قمة الشبكة حتى آخر خط سفلي صريح بسطر واحد نظيف ومقروء.
تستطيع توظيف الكلمة المفتاحية span منفردةً أو مقترنةً بخط بداية صريح داخل خاصية grid-row:
- تمدد تلقائي الموضع —
grid-row: span 2: يبقي البطاقة في موقعها التلقائي الطبيعي مع مضاعفة ارتفاعها لتشغل صفين متتاليين. - تمدد محدّد البداية —
grid-row: 2 / span 3: يثبّت انطلاق البطاقة عند الخط الأفقي2ثم يمدها لثلاثة صفوف متتابعة. تنقّل بين الأنماط الثلاثة في المختبر التفاعلي التالي:
.spotlight-card {
grid-row: span 2;
background-color: #ccfbf1;
border: 2px solid #0f766e;
}تعيد جميع خصائص الاختصار في CSS أي جزء محذوف منها إلى قيمته الافتراضية تلقائياً. فإذا كانت بطاقة تحمل سابقاً grid-row-end: span 3 ثم كتبتَ لاحقاً grid-row: 2 بدون شرطة مائلة، فسيعيد الاختصار خاصية grid-row-end ضمنياً إلى auto فينكمش ارتفاع البطاقة إلى صف واحد فوراً.
لذلك إذا أردت تعديل خط البداية وحده مع الحفاظ على تمدد سابق، استخدم الخاصية المفصلة grid-row-start: 2 أو صرّح بالطرفين معاً عبر grid-row: 2 / span 3.
يكتمل التموضع ثنائي الأبعاد في الشبكة عند الجمع بين grid-column للمحور الأفقي و grid-row للمحور الرأسي؛ وبذلك تستطيع تسكين أي بطاقة رئيسية أو قائمة جانبية في أي تقاطع تريده بدقة متناهية:
صيغة اختصار 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 صفوف متتالية |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس اختصار grid-row بالشرطة المائلة لملء كامل الارتفاع عبر 1 / -1، وتمديد البطاقات بـ span، وتجنب المسح الضمني، والتموضع ثنائي الأبعاد مع grid-column. في الخطوة التالية ننتقل إلى درس خاصية grid-auto-rows مع Grid في لغة CSS لضبط ارتفاع الصفوف الضمنية المتولدة تلقائياً.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Grid Row Shorthand اختصار صف الشبكة grid-row
- خاصية مختصرة تجمع خط البداية الرأسي وخط النهاية الرأسي للعنصر في تصريح واحد تفصلهما شرطة مائلة.
- للمراجعة
- 02 Implicit Shorthand Reset المسح الضمني في الاختصار
- إعادة ضبط الخصائص الفرعية المحذوفة مثل خط النهاية إلى auto تلقائياً عند كتابة قيمة مفردة بدون شرطة مائلة.
- للمراجعة
- 03 Bento Grid Card بطاقة شبكة بينتو ثنائية البعد
- بطاقة بارزة تشغل عدة أعمدة وصفوف في آنٍ واحد عبر الجمع بين خاصيتي grid-column و grid-row.
- للمراجعة
- 04 Slash Delimiter (/) فاصل الشرطة المائلة
- الرمز النحوي الفاصل بين خط الانطلاق وخط التوقف في خصائص الشبكة دون إجراء قسمة رياضية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- لغة الأنماط التي توفر خصائص الاختصار النظيفة للتموضع ثنائي الأبعاد في الشبكات.
- للمراجعة
- 02 DOM DOM
- Document Object Model
- الترتيب الهيكلي لعناصر المستند الذي يحكم تسلسل التنقل بلوحة المفاتيح مهما تغيّر الموضع البصري.
- للمراجعة
- 03 UI UI
- User Interface
- واجهات المستخدم ولوحات التحكم المبنية بوضوح عبر اختصارات الأعمدة والصفوف.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
استبدل سطري البداية والنهاية المنفصلين على العنصر .tall-sidebar بالاختصار الواحد grid-row: 1 / -1 ليمتد لكامل الشبكة.
-
اجمع بين grid-column: 2 / 4 و grid-row: 1 / 3 على البطاقة .featured-hero لتشغل عمودين وصفين في الزاوية العلوية.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.