عرض مصدر CSS/grid-template

<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-template</code>}}</noinclude>
الخاصية <code>grid-template</code> في CSS هي خاصية مختصرة تستعمل لضبط قيم للخاصيات <code>[[CSS/grid-template-rows|grid-template-rows]]</code> و <code>[[CSS/grid-template-columns|grid-template-columns]]</code> و <code>[[CSS/grid-template-areas|grid-template-areas]]</code>.<syntaxhighlight lang="css">
/* كلمة محجوزة */
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;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|لكل خاصية مختصرة:
* <code>[[CSS/grid-template-columns|grid-template-columns]]</code>: <code>none</code>
* <code>[[CSS/grid-template-rows|grid-template-rows]]</code>: <code>none</code>
* <code>[[CSS/grid-template-areas|grid-template-areas]]</code>: <code>none</code>
|-
! scope="row" |تُطبَّق على
|حاويات grid.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|لكل خاصية مختصرة:
* <code>[[CSS/grid-template-columns|grid-template-columns]]</code>: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة
* <code>[[CSS/grid-template-rows|grid-template-rows]]</code>: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة
* <code>[[CSS/grid-template-areas|grid-template-areas]]</code>: كما حُدِّدَت.

|}

== أمثلة ==
استعملنا في المثال الآتي عناصر <code>[[HTML/section|<section>]]</code> و <code>[[HTML/header|<header>]]</code> و <code>[[HTML/nav|<nav>]]</code> و <code>[[HTML/main|<main>]]</code> و <code>[[HTML/footer|<footer>]]</code> لإنشاء تقسيم للصفحة، لاحظ كيف استخدمنا الخاصية <code>grid-template</code> لتعريف خصائص الشبكة، وكيف استعملنا أسماء المناطق مع الخاصية <code>[[CSS/grid-area|grid-area]]</code>:<syntaxhighlight lang="html">
<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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;
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|57.0
|52.0
|10 (مع السابقة <code>-ms-</code>)
|44
|10.1
|}
الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

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

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

=== القيمة <code><grid-template-rows> / <grid-template-columns></code> ===
ضبط قيمة الخاصيتين <code>[[CSS/grid-template-rows|grid-template-rows]]</code> و <code>[[CSS/grid-template-columns|grid-template-columns]]</code> إلى القيم المُحدَّدة، وضبط الخاصية <code>[[CSS/grid-template-areas|grid-template-areas]]</code> إلى <code>none</code>.

=== ضبط جميع قيم الخاصيات ===
<syntaxhighlight lang="css">
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
</syntaxhighlight>ضبط قيمة الخاصية <code>[[CSS/grid-template-areas|grid-template-areas]]</code> إلى السلاسل النصية المضبوطة، والخاصية <code>[[CSS/grid-template-rows|grid-template-rows]]</code> إلى أبعاد المسار التي تلي كل سلسلة نصية (وستُستعمل القيمة <code>auto</code> لأيّة أبعاد غير موجودة)، ويمكن تحديد أسماء الأسطر قبل وبعد كل بُعد. وستُضبَط قيمة الخاصية <code>[[CSS/grid-template-columns|grid-template-columns]]</code> بعد الشرطة المائلة <code>/</code> (وستكون قيمتها هي <code>none</code> إذا لم تُحدَّد).

ملاحظة: لا يمكن استخدام الدالة <code>[[CSS/repeat|repeat()]]‎</code> هنا لضبط أبعاد المسارات.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?;
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<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>?

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<length-percentage> = <length> | <percentage>

</syntaxhighlight>

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-template CSS Grid Layout]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Grid|{{SUBPAGENAME}}]]