الخاصية grid-template

من موسوعة حسوب
< CSS

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

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

القيمة الابتدائية لكل خاصية مختصرة:
تُطبَّق على حاويات grid.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة لكل خاصية مختصرة: 
/* كلمة محجوزة */
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>

انظر أيضًا

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/grid-template&oldid=21155»