الخاصية grid-template

الخاصية grid-template في CSS هي خاصية مختصرة تستعمل لضبط قيم للخاصيات grid-template-rows و grid-template-columns و grid-template-areas.

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

/* grid-template-rows / grid-template-columns */
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/* grid-template-areas grid-template-rows / grid-template-column */
grid-template: "a a a"
               "b b b";
grid-template: "a a a" 20%
               "b b b" auto;
grid-template: [header-top] "a a a"     [header-bottom]
                 [main-top] "b b b" 1fr [main-bottom]
                            / auto 1fr auto;

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

القيمة الابتدائية	لكل خاصية مختصرة: grid-template-columns: none grid-template-rows: none grid-template-areas: none
تُطبَّق على	حاويات grid.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	لكل خاصية مختصرة: grid-template-columns: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة grid-template-rows: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة grid-template-areas: كما حُدِّدَت.

أمثلة

استعملنا في المثال الآتي عناصر <section> و <header> و <nav> و <main> و <footer> لإنشاء تقسيم للصفحة، لاحظ كيف استخدمنا الخاصية grid-template لتعريف خصائص الشبكة، وكيف استعملنا أسماء المناطق مع الخاصية 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: 200px;
  grid-template: [header-left] "head head" 30px [header-right]
                 [main-left]   "nav  main" 1fr  [main-right]
                 [footer-left] "nav  foot" 30px [footer-right]
                 / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-column: foot;
}

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

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

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

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

تقبل الخاصية grid-template القيم التالية، لاحظ أنَّ الخاصية المختصرة grid تقبل القيم نفسها، لكنها تُعيد ضبط قيم الخاصيات التي تُحدِّد خصائص الشبكة ضمنيًا إلى قيمها الابتدائية.

القيمة none

كلمة محجوزة تُعيد ضبط قيمة جميع الخاصيات المُختصرَة إلى none، مما يعني أنَّنا لن نُصرِّح عن أبعاد الشبكة، ولا توجد مناطق مُسماة فيها، وستولّد الأسطر والأعمدة ضمنيًا، وستُحدَّد أبعادها عبر قيم الخاصيتين grid-auto-rows و grid-auto-columns.

القيمة <grid-template-rows> / <grid-template-columns>

ضبط قيمة الخاصيتين grid-template-rows و grid-template-columns إلى القيم المُحدَّدة، وضبط الخاصية grid-template-areas إلى none.

ضبط جميع قيم الخاصيات

[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

ضبط قيمة الخاصية grid-template-areas إلى السلاسل النصية المضبوطة، والخاصية grid-template-rows إلى أبعاد المسار التي تلي كل سلسلة نصية (وستُستعمل القيمة auto لأيّة أبعاد غير موجودة)، ويمكن تحديد أسماء الأسطر قبل وبعد كل بُعد. وستُضبَط قيمة الخاصية grid-template-columns بعد الشرطة المائلة / (وستكون قيمتها هي none إذا لم تُحدَّد).

ملاحظة: لا يمكن استخدام الدالة repeat()‎ هنا لضبط أبعاد المسارات.

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

grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?;

حيث:

<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<explicit-track-list> = [ <line-names>? <track-size> ]+ <line-names>?

حيث:

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto

حيث:

<length-percentage> = <length> | <percentage>

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

• مواصفة CSS Grid Layout.