الفرق بين المراجعتين ل"CSS/grid-area"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| (3 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-area</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>grid-area</code>}}</noinclude> | ||
| − | الخاصية <code>grid-area</code> في CSS هي خاصية مختصرة تضبط قيمة الخاصيات <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code>، مُحدَّدةً أبعاد عنصر grid وموضعه. | + | الخاصية <code>grid-area</code> في CSS هي خاصية مختصرة تضبط قيمة الخاصيات <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code>، مُحدَّدةً أبعاد عنصر grid وموضعه. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 51: | سطر 29: | ||
|} | |} | ||
| + | |||
| + | <syntaxhighlight lang="css"> | ||
| + | /* الكلمات المحجوزة */ | ||
| + | grid-area: auto; | ||
| + | grid-area: auto / auto; | ||
| + | grid-area: auto / auto / auto; | ||
| + | grid-area: auto / auto / auto / auto; | ||
| + | |||
| + | /* <custom-ident> */ | ||
| + | grid-area: some-grid-area; | ||
| + | grid-area: some-grid-area / another-grid-area; | ||
| + | |||
| + | /* <integer> && <custom-ident>? */ | ||
| + | grid-area: some-grid-area 4; | ||
| + | grid-area: some-grid-area 4 / 2 another-grid-area; | ||
| + | |||
| + | /* span && [ <integer> || <custom-ident> ] */ | ||
| + | grid-area: span 3; | ||
| + | grid-area: span 3 / span some-grid-area; | ||
| + | grid-area: 2 span / another-grid-area span; | ||
| + | |||
| + | /* القيم العامة */ | ||
| + | grid-area: inherit; | ||
| + | grid-area: initial; | ||
| + | grid-area: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| سطر 99: | سطر 103: | ||
== البنية العامة == | == البنية العامة == | ||
| − | تقبل الخاصية <code>grid-row-start</code> أربعة قيم <code><grid-line></code>، إذ إنَّ أوّل قيمة ستضبط | + | تقبل الخاصية <code>grid-row-start</code> أربعة قيم <code><grid-line></code>، إذ إنَّ أوّل قيمة ستضبط الخاصية <code>[[CSS/grid-row-start|grid-row-start]]</code>، والقيمة الثانية ستضبط <code>[[CSS/grid-column-start|grid-column-start]]</code>، والقيمة الثالثة ستضبط <code>[[CSS/grid-row-end|grid-row-end]]</code>، والقيمة الرابعة ستضبط <code>[[CSS/grid-column-end|grid-column-end]]</code>. |
| − | إذا حُذِفَت | + | إذا حُذِفَت <code>[[CSS/grid-column-end|grid-column-end]]</code>، وكانت <code>[[CSS/grid-column-start|grid-column-start]]</code> هي <code>[[CSS/custom-ident|<custom-ident>]]</code>، فستُضبَط <code>[[CSS/grid-column-end|grid-column-end]]</code> إلى <code>[[CSS/custom-ident|<custom-ident>]]</code>، أو ستُضبَط إلى <code>auto</code> فيما عدا ذلك. |
| − | إذا حُذِفَت | + | إذا حُذِفَت <code>[[CSS/grid-row-end|grid-row-end]]</code>، وكانت <code>[[CSS/grid-row-start|grid-row-start]]</code> هي <code>[[CSS/custom-ident|<custom-ident>]]</code>، فستُضبَط <code>[[CSS/grid-row-end|grid-row-end]]</code> إلى <code>[[CSS/custom-ident|<custom-ident>]]</code>، أو ستُضبَط إلى <code>auto</code> فيما عدا ذلك. |
| − | إذا حُذِفَت | + | إذا حُذِفَت <code>[[CSS/grid-column-start|grid-column-start]]</code>، وكانت <code>[[CSS/grid-row-start|grid-row-start]]</code> هي <code>[[CSS/custom-ident|<custom-ident>]]</code>، فستُضبط جميع الخاصيات إلى تلك القيمة، وإلا فستُضبَط إلى <code>auto</code>. |
يمكن أيضًا أن تُضبَط قيمة هذه الخاصية إلى <code>[[CSS/custom-ident|<custom-ident>]]</code> التي تعمل عمل اسم المنطقة، ويمكن بعد ذلك استخدامها عبر الخاصية <code>[[CSS/grid-template-areas|grid-template-areas]]</code>. | يمكن أيضًا أن تُضبَط قيمة هذه الخاصية إلى <code>[[CSS/custom-ident|<custom-ident>]]</code> التي تعمل عمل اسم المنطقة، ويمكن بعد ذلك استخدامها عبر الخاصية <code>[[CSS/grid-template-areas|grid-template-areas]]</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>-start</code> أو <code><custom-ident>-end</code> فستساهم هذه القيمة في تحديد موضع عنصر <code>grid</code> في ذاك السطر. | إذا كان هنالك سطرٌ له الاسم <code><custom-ident>-start</code> أو <code><custom-ident>-end</code> فستساهم هذه القيمة في تحديد موضع عنصر <code>grid</code> في ذاك السطر. | ||
ملاحظة: المناطق المسماة (grid areas) ستولِّد -ضمنيًا- أسماء أسطر لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى <code>foo</code>، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك سطرٌ آخر باسم <code>foo-start</code> أو <code>foo-end</code> حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة). | ملاحظة: المناطق المسماة (grid areas) ستولِّد -ضمنيًا- أسماء أسطر لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى <code>foo</code>، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك سطرٌ آخر باسم <code>foo-start</code> أو <code>foo-end</code> حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة). | ||
| − | === | + | === <code><integer> && <custom-ident>?</code> === |
تحديد موضع عنصر grid حسب قيمة العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى السطر؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر. | تحديد موضع عنصر grid حسب قيمة العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى السطر؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر. | ||
| − | === | + | === <code>span && [ <integer> || <custom-ident> ]</code> === |
| − | تحديد موضع عنصر grid حسب قيمة العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى السطر وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون | + | تحديد موضع عنصر grid حسب قيمة العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى السطر وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون <code><custom-ident></code> تساوي <code>span</code>. |
=== البنية الرسمية === | === البنية الرسمية === | ||
| سطر 136: | سطر 140: | ||
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ] | <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ] | ||
</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-end|grid-column-end]]</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>. | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
المراجعة الحالية بتاريخ 08:15، 12 سبتمبر 2018
الخاصية grid-area في CSS هي خاصية مختصرة تضبط قيمة الخاصيات grid-row-start و grid-column-start و grid-row-end و grid-column-end، مُحدَّدةً أبعاد عنصر grid وموضعه.
بطاقة الخاصية
| القيمة الابتدائية | لكل خاصية مختصرة:
|
|---|---|
| تُطبَّق على | عناصر grid الموجودة داخل حاويات grid. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | لكل خاصية مختصرة:
|
/* الكلمات المحجوزة */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;
/* <custom-ident> */
grid-area: some-grid-area;
grid-area: some-grid-area / another-grid-area;
/* <integer> && <custom-ident>? */
grid-area: some-grid-area 4;
grid-area: some-grid-area 4 / 2 another-grid-area;
/* span && [ <integer> || <custom-ident> ] */
grid-area: span 3;
grid-area: span 3 / span some-grid-area;
grid-area: 2 span / another-grid-area span;
/* القيم العامة */
grid-area: inherit;
grid-area: initial;
grid-area: unset;
أمثلة
مثال عن استخدام grid-area لتحديد موضع وامتداد أوّل عنصر grid:
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
شيفرة CSS:
#grid {
display: grid;
height: 150px;
grid-template: 50px 100px / repeat(4, 1fr);
}
#item1 {
background-color: lime;
grid-area: 2 / 1 / auto / 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-start أربعة قيم <grid-line>، إذ إنَّ أوّل قيمة ستضبط الخاصية grid-row-start، والقيمة الثانية ستضبط grid-column-start، والقيمة الثالثة ستضبط grid-row-end، والقيمة الرابعة ستضبط grid-column-end.
إذا حُذِفَت grid-column-end، وكانت grid-column-start هي <custom-ident>، فستُضبَط grid-column-end إلى <custom-ident>، أو ستُضبَط إلى auto فيما عدا ذلك.
إذا حُذِفَت grid-row-end، وكانت grid-row-start هي <custom-ident>، فستُضبَط grid-row-end إلى <custom-ident>، أو ستُضبَط إلى auto فيما عدا ذلك.
إذا حُذِفَت grid-column-start، وكانت grid-row-start هي <custom-ident>، فستُضبط جميع الخاصيات إلى تلك القيمة، وإلا فستُضبَط إلى auto.
يمكن أيضًا أن تُضبَط قيمة هذه الخاصية إلى <custom-ident> التي تعمل عمل اسم المنطقة، ويمكن بعد ذلك استخدامها عبر الخاصية grid-template-areas.
<grid-line> تُحدِّد كما يلي:
- الكلمة المحجوزة
auto - أو
<custom-ident> - أو عدد صحيح
<integer> - أو
<custom-ident>وعدد صحيح<integer>يُفصَل بينهما بفراغ - أو الكلمة المحجوزة
spanمع<custom-ident>أو عدد صحيح<integer>أو كلاهما.
auto
تُشير هذه الكلمة المحجوزة إلى أنَّ هذه الخاصية لن تُساهم في تحديد موضع عنصر grid.
<custom-ident>
إذا كان هنالك سطرٌ له الاسم <custom-ident>-start أو <custom-ident>-end فستساهم هذه القيمة في تحديد موضع عنصر grid في ذاك السطر.
ملاحظة: المناطق المسماة (grid areas) ستولِّد -ضمنيًا- أسماء أسطر لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى foo، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك سطرٌ آخر باسم foo-start أو foo-end حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة).
<integer> && <custom-ident>?
تحديد موضع عنصر grid حسب قيمة العدد الصحيح <integer> نسبةً إلى السطر؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر.
span && [ <integer> || <custom-ident> ]
تحديد موضع عنصر grid حسب قيمة العدد الصحيح <integer> نسبةً إلى السطر وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون <custom-ident> تساوي span.
البنية الرسمية
grid-area: <grid-line> [ / <grid-line> ]{0,3};
حيث:
<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-endوgrid-column-gap. - صفحة الخاصية
grid-rowوالخاصيات الفرعية منها وهي:grid-row-startوgrid-row-endوgrid-row-gap.
مصادر ومواصفات
- مواصفة CSS Grid Layout.