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</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>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>+;

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

• مواصفة CSS Grid Layout.