في هذا الدرس 5تصفّح المواضيع
بينما تحدد خاصية grid-column-start الخط الرأسي الذي يبدأ منه العنصر أفقياً، تتولى الخاصية المكملة grid-column-end تحديد الخط الرأسي الدقيق الذي يتوقف عنده امتداد ذلك العنصر؛ وباجتماعهما يمكنك تحويل أي خلية مفردة إلى شريط علوي عريض أو منطقة محتوى رئيسية واسعة.
تخيل إحداثيات الشبكة دائماً عبر خطوط الفصل لا أرقام الأعمدة؛ فالعنصر الذي يبدأ من الخط 1 ويتوقف عند الخط 4 يغطي الأعمدة الأول والثاني والثالث فقط، لأن الخط الرابع هو الجدار الفاصل بعد العمود الثالث مباشرةً.
القيمة الافتراضية لخاصية grid-column-end هي auto، وتجعل العنصر يمتد لمسار عمود واحد فقط بعد خط بدايته. وعند استبدالها برقم موجب مثل grid-column-end: 4 مع بداية من الخط الأول، يتمدد العنصر ليملأ الأعمدة الثلاثة الأولى مع الفجوات الفاصلة بينها.
كما يمكنك تمرير اسم خط مخصص من القالب مثل grid-column-end: main-end، مما يحافظ على وضوح الكود واستقرار موضع النهاية حتى لو أضفت أعمدة جانبية جديدة لاحقاً.
.layout-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 12px;
}
.main-panel {
grid-column-start: 1;
grid-column-end: 4;
}تثبيت رقم نهاية موجب مثل 5 يجعل الشريط العلوي عرضة للخلل فور تعديل عدد أعمدة الشبكة من 4 أعمدة إلى 3 أو 5 أعمدة. والحل الهندسي الأنظف هو استخدام القيمة السالبة grid-column-end: -1 التي تشير دائماً إلى آخر خط خارجي في الشبكة الصريحة.
عند الجمع بين grid-column-start: 1 و grid-column-end: -1 يمتد الشريط العلوي أو التذييل السفلي على كامل عرض الشبكة مهما تغير عدد أعمدتها، كما يمكنك البدء من الخط 2 مع النهاية -1 لملء بقية الصف بالكامل.
.page-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.top-banner {
grid-column-start: 1;
grid-column-end: -1;
}عندما تعرف نقطة بداية العنصر أو ترغب في تركها للتدفق التلقائي، فإن كتابة grid-column-end: span 2 تخبر المتصفح بمد العنصر ليغطي عمودين كاملين انطلاقاً من خط بدايته دون الحاجة لحساب رقم خط التوقف ذهنياً.
على سبيل المثال، الجمع بين grid-column-start: 2 و grid-column-end: span 2 يعبّر بوضوح مباشر عن بطاقة تبدأ من الخط الثاني وتمتد بعرض عمودين متتاليين حتى الخط الرابع.
.dash-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
}
.chart-box {
grid-column-start: 2;
grid-column-end: span 3;
}يمنحك الجمع بين grid-column-start و grid-column-end تحكماً كاملاً في الحيز الأفقي لأي عنصر داخل الشبكة. استعن بالجدول المرجعي التالي لاختيار الصيغة الأنسب لتصميمك والتحقق منها عبر مخطط Layout في أدوات المطور.
| نمط القيمة | ثنائية التصريح | النتيجة الأفقية في الشبكة |
|---|---|---|
| خلية مفردة افتراضية | grid-column-end: auto; | يشغل العنصر مسار عمود واحد فقط بعد خط بدايته |
| خط توقف موجب | البداية 1 والنهاية 4 | يمتد عبر 3 أعمدة كاملة من الأول حتى الثالث |
| كامل عرض الشبكة | البداية 1 والنهاية -1 | يغطي جميع الأعمدة الصريحة مهما كان عددها |
| امتداد نسبي | البداية 2 والنهاية span 2 | يبدأ من الخط الثاني ويغطي عمودين متتاليين |
| خط نهاية مسمى | grid-column-end: content-end; | يتوقف بدقة عند الخط الرأسي المسمى في القالب |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعرفت في هذا الدرس على آلية عمل grid-column-end لضبط خطوط التوقف الموجبة وبناء الأشرطة الممتدة بالقيمة -1 ودمجها مع خط البداية. الخطوة التالية هي الانتقال إلى درس خاصية grid-column مع Grid في لغة CSS لدمج البداية والنهاية في سطر مختصر واحد.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 grid-column-end خاصية grid-column-end
- خاصية تُطبَّق على عنصر الشبكة لتحديد الخط الرأسي الذي ينتهي عنده امتداد العنصر أفقياً.
- للمراجعة
- 02 Line -1 الخط السالب -1
- الخط الرأسي الخارجي الأخير للشبكة الصريحة، ويُستخدم لمد العناصر حتى نهاية الصف مهما كان عدد الأعمدة.
- للمراجعة
- 03 Line Conflict Resolution معالجة تعارض الخطوط
- قاعدة قياسية تبدل خطي البداية والنهاية إذا انعكسا أو تفرض عرض عمود واحد إذا أشارا لنفس الخط.
- للمراجعة
- 04 Explicit Grid Boundary حدود الشبكة الصريحة
- الإطار الخارجي للأعمدة المعرّفة في القالب الصريح والذي تُحسب الأرقام السالبة انطلاقاً من حافته الختامية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- معيار تنسيق صفحات الويب المسؤول عن بناء المسارات الشبكية والتموضع عبر الخطوط.
- للمراجعة
- 02 W3C W3C
- World Wide Web Consortium
- المنظمة الدولية التي تضع المواصفات القياسية لترقيم خطوط الشبكة وقواعد معالجة تعارضها.
- للمراجعة
- 03 UI UI
- User Interface
- واجهة المستخدم المرئية من أشرطة علوية ولوحات تحكم وأعمدة جانبية تُبنى عبر خطوط الشبكة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
داخل شبكة من 3 أعمدة، اجمع بين grid-column-start: 1 و grid-column-end: -1 على عنصر الشريط العلوي ليمتد عبر كل الأعمدة.
-
أنشئ لوحة من 4 أعمدة وطبّق grid-column-start: 2 مع grid-column-end: span 3 على صندوق الرسم البياني.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.