الفرق بين المراجعتين لصفحة: «CSS/grid-column-end»

المراجعة الحالية بتاريخ 08:09، 12 سبتمبر 2018

الخاصية grid-column-end في CSS تستعمل لضبط مكان نهاية عنصر grid ضمن عمود grid بتحديد رقم العمود أو الامتداد أو جعل موضع العنصر تلقائيًا.

بطاقة الخاصية

القيمة الابتدائية	`auto`
تُطبَّق على	عناصر grid الموجودة داخل حاويات grid.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت

/* كلمة محجوزة */
grid-column-end: auto;

/* <custom-ident> */
grid-column-end: somegridarea;

/* <integer> + <custom-ident> */
grid-column-end: 2;
grid-column-end: somegridarea 4;

/* span + <integer> + <custom-ident> */
grid-column-end: span 3;
grid-column-end: span somegridarea;
grid-column-end: 5 somegridarea span;

/* القيم العامة */
grid-column-end: inherit;
grid-column-end: initial;
grid-column-end: unset;

أمثلة

مثال عن استخدام grid-column-end لجعل أحد عناصر grid يمتد على أكثر من عمود:

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

شيفرة CSS:

#grid {
  display: grid;
  height: 200px;
  grid-template:  200px / repeat(4, 1fr);
}

#item1 {
  background-color: lime;
  grid-column-end: span 2;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	57.0	52.0	10 (مع السابقة `-ms-`)	44	10.1

الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

البنية العامة

تقبل الخاصية grid-column-end قيمةً واحدةً هي <grid-line>، و <grid-line> تُحدِّد كما يلي:

الكلمة المحجوزة auto
أو <custom-ident>
أو عدد صحيح <integer>
أو <custom-ident> وعدد صحيح <integer> يُفصَل بينهما بفراغ
أو الكلمة المحجوزة span مع <custom-ident> أو عدد صحيح <integer> أو كلاهما.

`auto`

تُشير هذه الكلمة المحجوزة إلى أنَّ هذه الخاصية لن تُساهم في تحديد موضع عنصر grid.

`<custom-ident>`

إذا كان هنالك عمودٌ له الاسم ‎<custom-ident>-end فستساهم هذه القيمة في تحديد موضع عنصر grid في ذاك العمود.

ملاحظة: المناطق المسماة (grid areas) ستولد -ضمنيًا- أسماء أعمدة لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى foo، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك عمودٌ آخر باسم foo-end حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة).

‎`<integer> && <custom-ident>?` ‎

تحديد موضع عنصر grid حسب العدد الصحيح <integer> نسبةً إلى العمود؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر.

`span && [ <integer> || <custom-ident> ]` ‎

تحديد موضع عنصر grid حسب العدد الصحيح <integer> نسبةً إلى العمود وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون <custom-ident> تساوي span.

البنية الرسمية

grid-column-end: <grid-line>;

حيث:

<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

انظر أيضًا

صفحة الخاصية grid-auto والخاصيات الفرعية منها وهي: grid-auto-rows و grid-auto-columns و grid-auto-flow.
صفحة الخاصية grid-column والخاصيات الفرعية منها وهي: grid-column-start و grid-column-gap.
صفحة الخاصية grid-row والخاصيات الفرعية منها وهي: grid-row-start و grid-row-end و grid-row-gap.

مصادر ومواصفات

مواصفة CSS Grid Layout.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>grid-column-end</code>}}</noinclude>
-الخاصية <code>grid-column-end</code> في CSS تستعمل لضبط مكان نهاية عنصر grid ضمن عمود grid بتحديد رقم العمود أو الامتداد أو جعل موضع العنصر تلقائيًا.<syntaxhighlight lang="css">
+الخاصية <code>grid-column-end</code> في CSS تستعمل لضبط مكان نهاية عنصر grid ضمن عمود grid بتحديد رقم العمود أو الامتداد أو جعل موضع العنصر تلقائيًا.
+== بطاقة الخاصية ==
+{| class="wikitable" style="width: 100%;"
+|-
+! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
+|<code>auto</code>
+|-
+! scope="row" |تُطبَّق على
+|عناصر grid الموجودة داخل حاويات grid.
+|-
+! scope="row" |قابلة للوراثة
+|لا
+|-
+!قابلة للتحريك
+|لا
+|-
+! scope="row" |القيمة المحسوبة
+|كما حُدِّدَت
+|}
+<syntaxhighlight lang="css">
 /* كلمة محجوزة */
 grid-column-end: auto;
@@ سطر 21: / سطر 43: @@
 grid-column-end: unset;
 </syntaxhighlight>
-{| class="wikitable" style="width: 100%;"
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
-|<code>auto</code>
-|-
-! scope="row" |تُطبَّق على
-|عناصر grid الموجودة داخل حاويات grid.
-|-
-! scope="row" |قابلة للوراثة
-|لا
-|-
-!قابلة للتحريك
-|لا
-|-
-! scope="row" |القيمة المحسوبة
-|كما حُدِّدَت
-|}
 == أمثلة ==
@@ سطر 87: / سطر 91: @@
 == البنية العامة ==
-تقبل الخاصية <code>grid-column-end</code> قيمةً واحدةً هي <code><grid-line></code>، وقيمة <code><grid-line></code> تُحدِّد كما يلي:
+تقبل الخاصية <code>grid-column-end</code> قيمةً واحدةً هي <code><grid-line></code>، و <code><grid-line></code> تُحدِّد كما يلي:
 * الكلمة المحجوزة <code>auto</code>
-* أو قيمة <code>[[CSS/custom-ident|<custom-ident>]]</code>
+* أو <code>[[CSS/custom-ident|<custom-ident>]]</code>
 * أو عدد صحيح <code>[[CSS/integer|<integer>]]</code>
-* أو قيمة <code>[[CSS/custom-ident|<custom-ident>]]</code> وعدد صحيح <code>[[CSS/integer|<integer>]]</code> يُفصَل بينهما بفراغ
+* أو  <code>[[CSS/custom-ident|<custom-ident>]]</code> وعدد صحيح <code>[[CSS/integer|<integer>]]</code> يُفصَل بينهما بفراغ
 * أو الكلمة المحجوزة <code>span</code> مع <code>[[CSS/custom-ident|<custom-ident>]]</code> أو عدد صحيح <code>[[CSS/integer|<integer>]]</code> أو كلاهما.
-=== القيمة <code>auto</code> ===
+===  <code>auto</code> ===
 تُشير هذه الكلمة المحجوزة إلى أنَّ هذه الخاصية لن تُساهم في تحديد موضع عنصر grid.
-=== القيمة <code><custom-ident></code> ===
+===  <code><custom-ident></code> ===
 إذا كان هنالك عمودٌ له الاسم ‎<code><custom-ident>-end</code> فستساهم هذه القيمة في تحديد موضع عنصر <code>grid</code> في ذاك العمود.
 ملاحظة: المناطق المسماة (grid areas) ستولد -ضمنيًا- أسماء أعمدة لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى <code>foo</code>، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك عمودٌ آخر باسم <code>foo-end</code> حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة).
-===  القيمة‎<code><integer> && <custom-ident>?</code> ‎ ===
+===  ‎<code><integer> && <custom-ident>?</code> ‎ ===
-تحديد موضع عنصر grid حسب قيمة العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر.
+تحديد موضع عنصر grid حسب العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر.
-=== القيمة<code>span && [ <integer> || <custom-ident> ]</code> ‎ ===
+=== <code>span && [ <integer> || <custom-ident> ]</code> ‎ ===
-تحديد موضع عنصر grid حسب قيمة العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون قيمة <code><custom-ident></code> تساوي <code>span</code>.
+تحديد موضع عنصر grid حسب العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون  <code><custom-ident></code> تساوي <code>span</code>.
 === البنية الرسمية ===
@@ سطر 116: / سطر 120: @@
 </syntaxhighlight>
-== مصادر ومواصفات ==
+==  انظر أيضًا ==
+*صفحة الخاصية <code>grid-auto</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-auto-rows|grid-auto-rows]]</code> و <code>[[CSS/grid-auto-columns|grid-auto-columns]]</code> و <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code>.
+*صفحة الخاصية <code>[[CSS/grid-column|grid-column]]</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-gap|grid-column-gap]]</code>.
+*صفحة الخاصية <code>[[CSS/grid-column|grid-]][[CSS/grid-row|row]]</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> و <code>[[CSS/grid-column-gap|grid-]][[CSS/grid-row-gap|row]][[CSS/grid-column-gap|-gap]]</code>.
+==مصادر ومواصفات==
 * مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-column-end CSS Grid Layout].
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Property]]
+[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Grid]]
+[[تصنيف:CSS Grid|{{SUBPAGENAME}}]]