CSS/grid-template

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

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

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

أمثلة

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

<section id="page">
  <header>الرأس</header>
  <nav>قائمة التنقل</nav>
  <main>المنطقة الرئيسية</main>
  <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.