الخاصية grid-area
الخاصية 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.