الفرق بين المراجعتين ل"CSS/grid-template-columns"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-template-columns</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>grid-template-columns</code>}}</noinclude> | ||
| − | الخاصية <code>grid-template-columns</code> في CSS تضبط أسماء وأبعاد مسارات الأعمدة في تخطيط Grid.<syntaxhighlight lang="css"> | + | الخاصية <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; | grid-template-columns: none; | ||
| سطر 27: | سطر 49: | ||
grid-template-columns: unset; | grid-template-columns: unset; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== أمثلة == | == أمثلة == | ||
| سطر 89: | سطر 92: | ||
تقبل الخاصية <code>grid-template-columns</code> القيم التالية. | تقبل الخاصية <code>grid-template-columns</code> القيم التالية. | ||
| − | === | + | === <code>none</code> === |
كلمة محجوزة تعني أنَّنا لن نُحدِّد الشبكة بوضوح، وإنما ستولّد الأعمدة ضمنيًا وستُحدَّد أبعادها عبر الخاصية <code>[[CSS/grid-auto-columns|grid-auto-columns]]</code>. | كلمة محجوزة تعني أنَّنا لن نُحدِّد الشبكة بوضوح، وإنما ستولّد الأعمدة ضمنيًا وستُحدَّد أبعادها عبر الخاصية <code>[[CSS/grid-auto-columns|grid-auto-columns]]</code>. | ||
| − | === | + | === <code>[[CSS/length|<length>]]</code> === |
طول مطلق غير سالب. | طول مطلق غير سالب. | ||
| − | === | + | === <code>[[CSS/percentage|<percentage>]]</code> === |
| − | نسبة مئوية غير سالبة، وتكون نسبةً إلى أبعاد حاوية gird، وإن كانت أبعاد حاوية grid تعتمد على أبعاد المسارات الموجودة فيها، فيجب أن تُعامل النسب المئوية | + | نسبة مئوية غير سالبة، وتكون نسبةً إلى أبعاد حاوية gird، وإن كانت أبعاد حاوية grid تعتمد على أبعاد المسارات الموجودة فيها، فيجب أن تُعامل النسب المئوية مثل <code>auto</code>. |
| − | === | + | === <code><flex></code> === |
عدد غير سالب له الواحدة <code>fr</code> التي تُحدِّد عامل flex للمسار. وكل مسار حُدِّدَت أبعاده عبر هذه القيمة سيتشارك المساحة المتبقية بالتناسب مع قيمة flex له. | عدد غير سالب له الواحدة <code>fr</code> التي تُحدِّد عامل flex للمسار. وكل مسار حُدِّدَت أبعاده عبر هذه القيمة سيتشارك المساحة المتبقية بالتناسب مع قيمة flex له. | ||
عندما توجد هذه القيمة خارج الدالة <code>minmax()</code> فهي تُشير إلى القيمة الدنيا التلقائية (أي <code>minmax(auto, <flex>)</code>). | عندما توجد هذه القيمة خارج الدالة <code>minmax()</code> فهي تُشير إلى القيمة الدنيا التلقائية (أي <code>minmax(auto, <flex>)</code>). | ||
| − | === | + | === <code>max-content</code> === |
كلمة محجوزة تُمثِّل أصغر قياس لكي تتسع محتويات عنصر grid فيه. | كلمة محجوزة تُمثِّل أصغر قياس لكي تتسع محتويات عنصر grid فيه. | ||
| − | === | + | === <code>min-content</code> === |
كلمة محجوزة تُمثِّل أصغر قياس ممكن كيلا تخرج محتويات عنصر grid عن صندوق المحتوى (أي يحدث overflow). | كلمة محجوزة تُمثِّل أصغر قياس ممكن كيلا تخرج محتويات عنصر grid عن صندوق المحتوى (أي يحدث overflow). | ||
=== الدالة <code>minmax()</code> === | === الدالة <code>minmax()</code> === | ||
| − | شكل هذه الدالة العام هو <code>minmax(min, max)</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>). | كلمة محجوزة تمثِّل المسافة المتبقية في عنصر gird، أو الأبعاد الدنيا لعنصر grid (المُحدَّدة عبر الخاصيتين <code>[[CSS/min-width|min-width]]</code> و <code>[[CSS/min-height|min-height]]</code>). | ||
| سطر 120: | سطر 123: | ||
=== الدالة <code>fit-content()</code> === | === الدالة <code>fit-content()</code> === | ||
| − | شكل هذه الدالة العام هو <code>fit-content( [ <length> | <percentage> ] )</code>، التي تكافئ الصيغة الآتية <code>min(max-content, max(auto, argument))</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>[[CSS/repeat|repeat()]]</code> === | ||
| سطر 150: | سطر 153: | ||
</syntaxhighlight> | </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>[[CSS/grid-auto-rows|grid-auto-rows]]</code> التي تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا. | ||
| + | * صفحة الخاصية <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code> التي تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية. | ||
| + | * صفحة الخاصية <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]. | * مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-template-columns CSS Grid Layout]. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Grid]] | + | [[تصنيف:CSS Grid|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 14:13، 24 أكتوبر 2018
الخاصية grid-template-columns في CSS تضبط أسماء وأبعاد مسارات الأعمدة في تخطيط Grid.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | حاويات 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;
أمثلة
استعملنا في المثال الآتي الخاصية 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>
انظر أيضًا
- صفحة الخاصيات الفرعية التي تضبطها الخاصية
grid-templateوهيgrid-template-rowsوgrid-template-areas. - صفحة الخاصية
grid-auto-rowsالتي تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا. - صفحة الخاصية
grid-auto-flowالتي تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية. - صفحة الخاصية
grid-columnوالخاصيات الفرعية منها وهي:grid-column-startوgrid-column-endوgrid-column-gap. - صفحة الخاصية
grid-rowوالخاصيات الفرعية منها وهي:grid-row-startوgrid-row-endوgrid-row-gap.
مصادر ومواصفات
- مواصفة CSS Grid Layout.