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

<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-template-columns</code>}}</noinclude>
الخاصية <code>grid-template-columns</code> في CSS تضبط أسماء وأبعاد مسارات الأعمدة في تخطيط Grid.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>none</code>
|-
! scope="row" |تُطبَّق على
|حاويات grid.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.

|}

<syntaxhighlight lang="css">
/* كلمة محجوزة */
grid-template-columns: none;

/* <track-list> */
grid-template-columns: 100px 1fr;
grid-template-columns: [linename] 100px;
grid-template-columns: [linename1] 100px [linename2 linename3];
grid-template-columns: minmax(100px, 1fr);
grid-template-columns: fit-content(40%);
grid-template-columns: repeat(3, 200px);

/* <auto-track-list> */
grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;
grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;
grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];

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

== أمثلة ==
استعملنا في المثال الآتي الخاصية <code>gird-template-columns</code> لضبط أبعاد مسارات الأعمدة في حاوية grid، لاحظ أنَّ عرض حاوية grid هو <code>100%</code>، وأنَّ عرض أوّل عمود هو <code>50px</code>، أما العمود الثاني فهو <code>1fr</code>، أي 100% من المسافة المتبقية:<syntaxhighlight lang="html">
<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: skyblue;
}

#areaB {
  background-color: salmon;
}
</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-columns</code> القيم التالية.

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

===  <code>[[CSS/length|<length>]]</code> ===
طول مطلق غير سالب.

===  <code>[[CSS/percentage|<percentage>]]</code> ===
نسبة مئوية غير سالبة، وتكون نسبةً إلى أبعاد حاوية gird، وإن كانت أبعاد حاوية grid تعتمد على أبعاد المسارات الموجودة فيها، فيجب أن تُعامل النسب المئوية مثل <code>auto</code>.

===  <code><flex></code> ===
عدد غير سالب له الواحدة <code>fr</code> التي تُحدِّد عامل flex للمسار. وكل مسار حُدِّدَت أبعاده عبر هذه القيمة سيتشارك المساحة المتبقية بالتناسب مع قيمة flex له.

عندما توجد هذه القيمة خارج الدالة <code>minmax()</code>‎ فهي تُشير إلى القيمة الدنيا التلقائية (أي ‎<code>minmax(auto, ‎<flex>‎)</code>‎).

===  <code>max-content</code> ===
كلمة محجوزة تُمثِّل أصغر قياس لكي تتسع محتويات عنصر grid فيه.

=== <code>min-content</code> ===
كلمة محجوزة تُمثِّل أصغر قياس ممكن كيلا تخرج محتويات عنصر grid عن صندوق المحتوى (أي يحدث overflow).

=== الدالة <code>minmax()‎</code> ===
شكل هذه الدالة العام هو <code>minmax(min, max)‎</code>، وتُعرِّف مجال أبعاد الذي يكون أكبر أو يساوي <code>min</code>، وأصغر أو يساوي  <code>max</code>، وإذا كانت <code>max</code> أقل من <code>min</code> فسيتم تجاهل  <code>max</code> وستُعامل قيمة الدالة على أنها <code>min</code>.

يمكن استخدام <code><flex></code> كأكبر قيمة لهذه الدالة، ولا يجوز أن تُستعمَل كأدنى قيمة.

===  <code>auto</code> ===
كلمة محجوزة تمثِّل المسافة المتبقية في عنصر gird، أو الأبعاد الدنيا لعنصر grid (المُحدَّدة عبر الخاصيتين <code>[[CSS/min-width|min-width]]</code> و <code>[[CSS/min-height|min-height]]</code>).

لاحظ أنَّ المسارات التي تكون أبعادها <code>auto</code> فقط هي المسارات التي يمكن أن تمتد عبر الخاصيتين <code>[[CSS/align-content|align-content]]</code> و <code>[[CSS/justify-content|justify-content]]</code>.

=== الدالة <code>fit-content()‎</code> ===
شكل هذه الدالة العام هو <code>fit-content( [ <length> | <percentage> ] )‎</code>، التي تكافئ الصيغة الآتية <code>min(max-content, max(auto, argument))‎</code>، وهي تُحسَب بطريقة شبيهة ب <code>auto</code>، باستثناء أنَّ أبعاد المسار لن تتجاوز قيمة الوسيط إن كانت قيمته أكبر من  <code>auto</code>.

=== الدالة <code>[[CSS/repeat|repeat()‎]]</code> ===
شكل هذه الدالة العام هو <code>repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )‎</code>، وهذه الدالة تفيد في تكرار نمط معيّن من أبعاد المسارات، مما يسمح بتحديد أبعاد عدد كبير من المسارات دون الحاجة إلى كتابة ذلك بالتفصيل.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
grid-template-columns: none | <track-list> | <auto-track-list>;
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-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
<fixed-breadth> = <length-percentage>

</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<length-percentage> = <length> | <percentage>

</syntaxhighlight>

== انظر أيضًا ==
* صفحة الخاصيات الفرعية التي تضبطها الخاصية <code>[[CSS/grid-template|grid-template]]</code> وهي <code>[[CSS/grid-template-rows|grid-template-rows]]</code> و <code>[[CSS/grid-template-areas|grid-template-areas]]</code>.
* صفحة الخاصية <code>grid-auto</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-auto-rows|grid-auto-rows]]</code> و <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code>.
* صفحة الخاصية <code>[[CSS/grid-column|grid-column]]</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code> و <code>[[CSS/grid-column-gap|grid-column-gap]]</code>.
* صفحة الخاصية <code>[[CSS/grid-column|grid-]][[CSS/grid-row|row]]</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> و <code>[[CSS/grid-column-gap|grid-]][[CSS/grid-row-gap|row]][[CSS/grid-column-gap|-gap]]</code>.

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