الفرق بين المراجعتين ل"CSS/grid-row-end"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-row-end</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>grid-row-end</code>}}</noinclude> | ||
| − | الخاصية <code>grid-row-end</code> في CSS تستعمل لضبط مكان نهاية عنصر grid ضمن سطر grid بتحديد السطر أو الامتداد أو جعل موضع العنصر تلقائيًا.<syntaxhighlight lang="css"> | + | الخاصية <code>grid-row-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-row-end: auto; | grid-row-end: auto; | ||
| سطر 21: | سطر 43: | ||
grid-row-end: unset; | grid-row-end: unset; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== أمثلة == | == أمثلة == | ||
| سطر 87: | سطر 91: | ||
== البنية العامة == | == البنية العامة == | ||
| − | تقبل الخاصية <code>grid-row-end</code> قيمةً واحدةً هي <code><grid-line></code>، | + | تقبل الخاصية <code>grid-row-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>. |
=== البنية الرسمية === | === البنية الرسمية === | ||
مراجعة 08:41، 4 سبتمبر 2018
الخاصية grid-row-end في CSS تستعمل لضبط مكان نهاية عنصر grid ضمن سطر grid بتحديد السطر أو الامتداد أو جعل موضع العنصر تلقائيًا.
بطاقة الخاصية
| القيمة الابتدائية | auto
|
|---|---|
| تُطبَّق على | عناصر grid الموجودة داخل حاويات grid. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت |
/* كلمة محجوزة */
grid-row-end: auto;
/* <custom-ident> */
grid-row-end: somegridarea;
/* <integer> + <custom-ident> */
grid-row-end: 2;
grid-row-end: somegridarea 4;
/* span + <integer> + <custom-ident> */
grid-row-end: span 3;
grid-row-end: span somegridarea;
grid-row-end: 5 somegridarea span;
/* القيم العامة */
grid-row-end: inherit;
grid-row-end: initial;
grid-row-end: unset;
أمثلة
مثال عن استخدام grid-row-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: repeat(4, 1fr) / 200px;
}
#item1 {
background-color: lime;
grid-row-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-row-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-row-end: <grid-line>;
حيث:
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
مصادر ومواصفات
- مواصفة CSS Grid Layout.