الفرق بين المراجعتين لصفحة: «CSS/grid-auto-columns»

مراجعة 09:44، 2 سبتمبر 2018

الخاصية grid-auto-columns في CSS تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا.

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

القيمة الابتدائية	`auto`
تُطبَّق على	حاويات grid.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.

/* كلمات محجوزة */
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;

إذا وُضِعَ عنصر grid ضمن عمودٍ أبعاده غير مُحدَّدة بوضوح عبر الخاصية grid-template-columns، فستُنشَأ مسارات ضمنية لتحتويه، وهذا يحدث إذا كان موضع العنصر في عمود خارج مجال الأعمدة المُنشأة، أو أنَّ خوارزمية تحديد المواضع التلقائية قد أنشأت أعمدة إضافية.

أمثلة

استعملنا في المثال الآتي الخاصية gird-auto-columns لضبط أبعاد مسارات الأعمدة التي لم يُصرَّح عن أبعادها في حاوية grid، وإنما أُنشِئَت ضمنيًا:

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

شيفرة CSS:

#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  grid-gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	57.0	52.0	10 (مع السابقة `-ms-`)	44	10.1

الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

البنية العامة

تقبل الخاصية grid-auto-columns القيم التالية.

`<length>`

طول مطلق غير سالب.

`<percentage>`

نسبة مئوية غير سالبة، وتكون نسبةً إلى أبعاد حاوية gird، وإن كانت أبعاد حاوية grid غير مُعرَّفة، فيجب أن تُعامل النسب المئوية مثل auto.

`<flex>`

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

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

`max-content`

كلمة محجوزة تُمثِّل أصغر قياس لكي تتسع محتويات عنصر grid فيه.

`min-content`

كلمة محجوزة تُمثِّل أصغر قياس ممكن كيلا تخرج محتويات عنصر grid عن صندوق المحتوى (أي يحدث overflow).

الدالة `minmax()‎`

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

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

`auto`

كلمة محجوزة تمثِّل المحتوى الأكبر في عنصر gird، أو الأبعاد الدنيا لعنصر grid (المُحدَّدة عبر الخاصيتين min-width و min-height).

لاحظ أنَّ المسارات التي تكون أبعادها auto فقط هي المسارات التي يمكن أن تمتد عبر الخاصيتين align-content و justify-content.

الدالة `fit-content()‎`

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

البنية الرسمية

grid-auto-columns: <track-size>+;

حيث:

<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )

حيث:

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>grid-auto-columns</code>}}</noinclude>
-الخاصية <code>grid-auto-columns</code> في CSS تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا.<syntaxhighlight lang="css">
+الخاصية <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;
@@ سطر 42: / سطر 64: @@
 grid-auto-columns: unset;
 </syntaxhighlight>إذا وُضِعَ عنصر grid ضمن عمودٍ أبعاده غير مُحدَّدة بوضوح عبر الخاصية <code>[[CSS/grid-template-columns|grid-template-columns]]</code>، فستُنشَأ مسارات ضمنية لتحتويه، وهذا يحدث إذا كان موضع العنصر في عمود خارج مجال الأعمدة المُنشأة، أو أنَّ خوارزمية تحديد المواضع التلقائية قد أنشأت أعمدة إضافية.
-{| class="wikitable" style="width: 100%;"
-|-
-! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
-|<code>auto</code>
-|-
-! scope="row" |تُطبَّق على
-|حاويات grid.
-|-
-! scope="row" |قابلة للوراثة
-|لا
-|-
-!قابلة للتحريك
-|لا
-|-
-! scope="row" |القيمة المحسوبة
-|كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.
-|}
 == أمثلة ==
@@ سطر 102: / سطر 106: @@
 تقبل الخاصية <code>grid-auto-columns</code> القيم التالية.
-=== القيمة <code>[[CSS/length|<length>]]</code> ===
+===  <code>[[CSS/length|<length>]]</code> ===
 طول مطلق غير سالب.
-=== القيمة <code>[[CSS/percentage|<percentage>]]</code> ===
+===  <code>[[CSS/percentage|<percentage>]]</code> ===
-نسبة مئوية غير سالبة، وتكون نسبةً إلى أبعاد حاوية gird، وإن كانت أبعاد حاوية grid غير مُعرَّفة، فيجب أن تُعامل النسب المئوية كالقيمة <code>auto</code>.
+نسبة مئوية غير سالبة، وتكون نسبةً إلى أبعاد حاوية gird، وإن كانت أبعاد حاوية grid غير مُعرَّفة، فيجب أن تُعامل النسب المئوية مثل <code>auto</code>.
-=== القيمة <code><flex></code> ===
+===  <code><flex></code> ===
 عدد غير سالب له الواحدة <code>fr</code> التي تُحدِّد عامل flex للمسار. وكل مسار حُدِّدَت أبعاده عبر هذه القيمة سيتشارك المساحة المتبقية بالتناسب مع قيمة flex له.
 عندما توجد هذه القيمة خارج الدالة <code>minmax()</code>‎ فهي تُشير إلى القيمة الدنيا التلقائية (أي ‎<code>minmax(auto, ‎<flex>‎)</code>‎).
-=== القيمة <code>max-content</code> ===
+===  <code>max-content</code> ===
 كلمة محجوزة تُمثِّل أصغر قياس لكي تتسع محتويات عنصر grid فيه.
-=== القيمة <code>min-content</code> ===
+===  <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>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><flex></code> كأكبر قيمة لهذه الدالة، ولا يجوز أن تُستعمَل كأدنى قيمة.
-=== القيمة <code>auto</code> ===
+===  <code>auto</code> ===
 كلمة محجوزة تمثِّل المحتوى الأكبر في عنصر gird، أو الأبعاد الدنيا لعنصر grid (المُحدَّدة عبر الخاصيتين <code>[[CSS/min-width|min-width]]</code> و <code>[[CSS/min-height|min-height]]</code>).
@@ سطر 130: / سطر 134: @@
 === الدالة <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>fit-content( [ <length> | <percentage> ] )‎</code>، التي تكافئ الصيغة الآتية <code>min(max-content, max(auto, argument))‎</code>، وهي تُحسَب بطريقة شبيهة ب <code>auto</code>، باستثناء أنَّ أبعاد المسار لن تتجاوز قيمة الوسيط إن كانت قيمته أكبر من <code>auto</code>.
 === البنية الرسمية ===

مراجعة 09:44، 2 سبتمبر 2018

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

أمثلة

دعم المتصفحات

البنية العامة

<length>

<percentage>

<flex>

max-content

min-content

الدالة minmax()‎

auto

الدالة fit-content()‎

البنية الرسمية

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

`<length>`

`<percentage>`

`<flex>`

`max-content`

`min-content`

الدالة `minmax()‎`

`auto`

الدالة `fit-content()‎`