شرح صفوف ومحتوى الفقرة
يمنحك الجمع بين 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 لدمج البداية والنهاية في سطر مختصر واحد.