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

<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-auto-columns</code>}}</noinclude>
الخاصية <code>grid-auto-columns</code> في CSS تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا.

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

|}

<syntaxhighlight lang="css">
/* كلمات محجوزة */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/* <length> */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/* <percentage> */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/* <flex> */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/* minmax() */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/* fit-content() */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/* track-size */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* القيم العامة */
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: unset;
</syntaxhighlight>إذا وُضِعَ عنصر grid ضمن عمودٍ أبعاده غير مُحدَّدة بوضوح عبر الخاصية <code>[[CSS/grid-template-columns|grid-template-columns]]</code>، فستُنشَأ مسارات ضمنية لتحتويه، وهذا يحدث إذا كان موضع العنصر في عمود خارج مجال الأعمدة المُنشأة، أو أنَّ خوارزمية تحديد المواضع التلقائية قد أنشأت أعمدة إضافية.

== أمثلة ==
استعملنا في المثال الآتي الخاصية <code>gird-auto-columns</code> لضبط أبعاد مسارات الأعمدة التي لم يُصرَّح عن أبعادها في حاوية grid، وإنما أُنشِئَت ضمنيًا:<syntaxhighlight lang="html">
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}
</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-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>.

=== البنية الرسمية ===
<syntaxhighlight lang="css">
grid-auto-columns: <track-size>+;
</syntaxhighlight>حيث:<syntaxhighlight lang="css">
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )

</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>

== انظر أيضًا ==
* صفحة الخاصية <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-]][[CSS/grid-column-start|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-auto-columns CSS Grid Layout]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Grid|{{SUBPAGENAME}}]]