CSS/grid-template-areas

الخاصية grid-template-areas في CSS تضبط أسماء مناطق gird (أي grid areas).

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

القيمة الابتدائية	none
تُطبَّق على	حاويات grid.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

/* كلمة محجوزة */
grid-template-areas: none;

/* <string> سلاسل نصية */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                     "a c d";

/* القيم العامة */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;

هذه المناطق ليست مرتبطةً بأيّ عنصر grid، لكن يمكن الإشارة إليها من خاصيات تحديد مواضع الشبكة التي هي grid-row-start و grid-row-end و grid-column-start و grid-column-end، والخاصيات المختصرة grid-row و grid-column و grid-area.

أمثلة

استعملنا في المثال الآتي عناصر <section> و <header> و <nav> و <main> و <footer> لإنشاء تقسيم للصفحة، لاحظ كيف استخدمنا الخاصية grid-template-areas لتعريف أسماء المناطق، وكيف استعملنا الأسماء مع الخاصية grid-area:

 <section id="page">
   <header>الرأس</header>
   <nav>قائمة التنقل</nav>
   <main>المنطقة الرئيسية</main>
   <footer>الذيل</footer>
 </section>

شيفرة CSS:

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	57.0	52.0	10 (مع السابقة -ms-)	44	10.1

الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

البنية العامة

تقبل الخاصية grid-template-areas القيم التالية.

none

لن تُعرَّف أيّة مناطق مسماة داخل حاوية grid.

‎<string> +‎

كل سلسلة نصية تُمثِّل سطرًا، وكل قيمة في تلك السلسلة النصية تُمثِّل عمودًا، ويجب أن يكون لجميع السلاسل النصية العدد نفسه من الكلمات، وإلا فلن تكون قيمة هذه الخاصية صالحةً.

إذا امتدت إحدى الخلايا على أكثر من سطر، فيمكن تكرار القيمة نفسها أكثر من مرة. وإذا أردنا ترك منطقة دون تسمية فيمكن استخدام نقطة واحدة أو أكثر مكانها.

البنية الرسمية

grid-template-areas: none | <string>+;

انظر أيضًا

• صفحة الخاصيات الفرعية التي تضبطها الخاصية grid-template وهي grid-template-rows و grid-template-columns.
• صفحة الخاصية grid-auto-rows التي تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا.
• صفحة الخاصية grid-auto-flow التي تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية.
• صفحة الخاصية 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.