الخاصية grid-template-columns

الخاصية grid-template-columns في CSS تضبط أسماء وأبعاد مسارات الأعمدة في تخطيط Grid.

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

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

أمثلة

استعملنا في المثال الآتي الخاصية gird-template-columns لضبط أبعاد مسارات الأعمدة في حاوية grid، لاحظ أنَّ عرض حاوية grid هو 100%، وأنَّ عرض أوّل عمود هو 50px، أما العمود الثاني فهو 1fr، أي 100% من المسافة المتبقية:

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
</div>

شيفرة CSS:

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 50px 1fr;
}

#areaA {
  background-color: skyblue;
}

#areaB {
  background-color: salmon;
}

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

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

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

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

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

القيمة none

كلمة محجوزة تعني أنَّنا لن نُحدِّد الشبكة بوضوح، وإنما ستولّد الأعمدة ضمنيًا وستُحدَّد أبعادها عبر الخاصية 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.

الدالة repeat()‎

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

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

grid-template-columns: none | <track-list> | <auto-track-list>;

حيث:

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

حيث:

<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>? )

حيث:

<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>

حيث:

<length-percentage> = <length> | <percentage>

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

• مواصفة CSS Grid Layout.