الفرق بين المراجعتين ل"CSS/grid-column-end"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-column-end</code>}}</noinclude> | <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; | grid-column-end: auto; | ||
| سطر 21: | سطر 43: | ||
grid-column-end: unset; | grid-column-end: unset; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== أمثلة == | == أمثلة == | ||
| سطر 87: | سطر 91: | ||
== البنية العامة == | == البنية العامة == | ||
| − | تقبل الخاصية <code>grid-column-end</code> قيمةً واحدةً هي <code><grid-line></code>، | + | تقبل الخاصية <code>grid-column-end</code> قيمةً واحدةً هي <code><grid-line></code>، و <code><grid-line></code> تُحدِّد كما يلي: |
* الكلمة المحجوزة <code>auto</code> | * الكلمة المحجوزة <code>auto</code> | ||
| − | * أو | + | * أو <code>[[CSS/custom-ident|<custom-ident>]]</code> |
* أو عدد صحيح <code>[[CSS/integer|<integer>]]</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>span</code> مع <code>[[CSS/custom-ident|<custom-ident>]]</code> أو عدد صحيح <code>[[CSS/integer|<integer>]]</code> أو كلاهما. | ||
| − | === | + | === <code>auto</code> === |
تُشير هذه الكلمة المحجوزة إلى أنَّ هذه الخاصية لن تُساهم في تحديد موضع عنصر grid. | تُشير هذه الكلمة المحجوزة إلى أنَّ هذه الخاصية لن تُساهم في تحديد موضع عنصر grid. | ||
| − | === | + | === <code><custom-ident></code> === |
إذا كان هنالك عمودٌ له الاسم <code><custom-ident>-end</code> فستساهم هذه القيمة في تحديد موضع عنصر <code>grid</code> في ذاك العمود. | إذا كان هنالك عمودٌ له الاسم <code><custom-ident>-end</code> فستساهم هذه القيمة في تحديد موضع عنصر <code>grid</code> في ذاك العمود. | ||
ملاحظة: المناطق المسماة (grid areas) ستولد -ضمنيًا- أسماء أعمدة لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى <code>foo</code>، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك عمودٌ آخر باسم <code>foo-end</code> حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة). | ملاحظة: المناطق المسماة (grid areas) ستولد -ضمنيًا- أسماء أعمدة لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى <code>foo</code>، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك عمودٌ آخر باسم <code>foo-end</code> حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة). | ||
| − | === | + | === <code><integer> && <custom-ident>?</code> === |
| − | تحديد موضع عنصر grid حسب | + | تحديد موضع عنصر grid حسب العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر. |
| − | === | + | === <code>span && [ <integer> || <custom-ident> ]</code> === |
| − | تحديد موضع عنصر grid حسب | + | تحديد موضع عنصر grid حسب العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون <code><custom-ident></code> تساوي <code>span</code>. |
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 116: | سطر 120: | ||
</syntaxhighlight> | </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]. | * مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-column-end CSS Grid Layout]. | ||
[[تصنيف:CSS|{{SUBPAGENAME}}]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property|{{SUBPAGENAME}}]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Grid|{{SUBPAGENAME}}]] | [[تصنيف:CSS Grid|{{SUBPAGENAME}}]] | ||
المراجعة الحالية بتاريخ 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.