CSS/grid-area

الخاصية grid-area في CSS هي خاصية مختصرة تضبط قيمة الخاصيات grid-row-start و grid-column-start و grid-row-end و grid-column-end، مُحدَّدةً أبعاد عنصر grid وموضعه.

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

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

/* الكلمات المحجوزة */
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> ] ]

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

• مواصفة CSS Grid Layout.