انتقل إلى محتوى الدرس

Grid Column End Concept مفهوم خط نهاية العمود للعنصر

أتقن خاصية grid-column-end في لغة CSS لتحديد الخط الرأسي الذي يتوقف عنده امتداد العنصر داخل الشبكة، أو مده حتى الحافة الأخيرة بالقيمة -1 وتحديد عرض المسارات بدقة.
3 صفوف تعليمية
لغة CSS
2,982 مشاهدة

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

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

بينما تحدد خاصية grid-column-start الخط الرأسي الذي يبدأ منه العنصر أفقياً، تتولى الخاصية المكملة grid-column-end تحديد الخط الرأسي الدقيق الذي يتوقف عنده امتداد ذلك العنصر؛ وباجتماعهما يمكنك تحويل أي خلية مفردة إلى شريط علوي عريض أو منطقة محتوى رئيسية واسعة.

تخيل إحداثيات الشبكة دائماً عبر خطوط الفصل لا أرقام الأعمدة؛ فالعنصر الذي يبدأ من الخط 1 ويتوقف عند الخط 4 يغطي الأعمدة الأول والثاني والثالث فقط، لأن الخط الرابع هو الجدار الفاصل بعد العمود الثالث مباشرةً.

الصف 2 صورة توضيحية
مخطط توضيحي يبين خط التوقف الموجب 4 وحافة النهاية -1 وتمديد المسارات span 3 في خاصية grid-column-end
الصف 3 ملاحظة هامة