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

المراجعة الحالية بتاريخ 08:43، 23 أكتوبر 2018

الدالة repeat()‎ في CSS تُكرِّر جزءًا من قائمة المسارات (track list)، مما يسمح بتعريف عدد كبير من الأعمدة والأسطر التي لها نمط تكرار معيّن بسهولة.

يمكن أن تُستعمَل هذا الدالة مع الخاصية grid-template-columns و grid-template-rows.

بطاقة الدالة

/* <track-repeat> */
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] 1fr [col-end])
repeat(4, [col-start] min-content [col-end])
repeat(4, [col-start] max-content [col-end])
repeat(4, [col-start] auto [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] auto [col-end])
repeat(4, [col-start] min-content [col-middle] max-content [col-end])

/* <auto-repeat> */
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(auto-fill, [col-start] 250px [col-end])
repeat(auto-fit, [col-start] 250px [col-end])
repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end])
repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end])

/* <fixed-repeat> */
repeat(4, 250px)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])
repeat(4, [col-start] minmax(100px, 1fr) [col-end])
repeat(4, [col-start] fit-content(200px) [col-end])
repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end])

أمثلة

لاحظ كيف استخدامنا هذه الدالة لتكرار القيم المُحدَّدة للخاصية grid-template-columns:

<div id="container">
  <div>
    عرض هذا العنصر هو 50 بيكسل
  </div>
  <div>
   العنصر ذو العرض المرن
  </div>
  <div>
    عرض هذا العنصر هو 50 بيكسل
  </div>
  <div>
   العنصر ذو العرض المرن
  </div>
  <div>
   عنصر غير مرن بعرض 100 بكسل
  </div>
</div>

شيفرة CSS:

#container {
  display: grid;
  grid-template-columns: repeat(2, 50px 1fr) 100px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: skyblue;
  padding: 10px;
}

#container > div {
  background-color: salmon;
  padding: 5px;
}

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

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

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

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

تقبل الدالة repeat()‎ القيم التالية.

`<length>`

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

`<percentage>`

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

`<flex>`

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

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

`max-content`

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

`min-content`

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

`auto`

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

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

`auto-fill`

إذا كانت أبعاد حاوية grid محددةً أو كانت لها أكبر أبعاد على المحور المناسب، فسيكون عدد التكرارات يساوي أكبر عدد صحيح موجب لا يُسبِّب بخروج المحتوى من حاوية gird، مع أخذ الخاصية grid-gap بالحسبان.

`auto-fit`

تشبه عمل الكلمة المحجوزة auto-fill، لكن بعد وضع عناصر grid فسيتم تجاهل المساحة الفارغة.

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

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

حيث:

<track-list> = [ <line-names>? [ <track-size> | <track-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>? )

حيث:

<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-columns و grid-template-rows.
صفحة الخاصية grid-auto والخاصيات الفرعية منها وهي: grid-auto-rows و grid-auto-flow.
صفحة الخاصية 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.

@@ سطر 2: / سطر 2: @@
 الدالة <code>repeat()‎</code> في CSS تُكرِّر جزءًا من قائمة المسارات (track list)، مما يسمح بتعريف عدد كبير من الأعمدة والأسطر التي لها نمط تكرار معيّن بسهولة.
-يمكن أن تُستعمَل هذا الدالة مع الخاصية <code>[[CSS/grid-template-columns|grid-template-columns]]</code> و <code>[[CSS/grid-template-rows|grid-template-rows]]</code>.<syntaxhighlight lang="css">
+يمكن أن تُستعمَل هذا الدالة مع الخاصية <code>[[CSS/grid-template-columns|grid-template-columns]]</code> و <code>[[CSS/grid-template-rows|grid-template-rows]]</code>.
+== بطاقة الدالة ==
+<syntaxhighlight lang="css">
 /* <track-repeat> */
 repeat(4, 1fr)
@@ سطر 36: / سطر 39: @@
 <div id="container">
    <div>
-     This item is 50 pixels wide.
+     عرض هذا العنصر هو 50 بيكسل
    </div>
    <div>
-    Item with flexible width.
+   العنصر ذو العرض المرن
    </div>
    <div>
-     This item is 50 pixels wide.
+     عرض هذا العنصر هو 50 بيكسل
    </div>
    <div>
-    Item with flexible width.
+   العنصر ذو العرض المرن
    </div>
    <div>
-    Inflexible item of 100 pixels width.
+   عنصر غير مرن بعرض 100 بكسل
    </div>
 </div>
@@ سطر 89: / سطر 92: @@
 تقبل الدالة <code>repeat()‎</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>auto</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>auto-fill</code> ===
+===  <code>auto-fill</code> ===
-إذا كانت أبعاد حاوية grid محددةً أو كانت لها أكبر أبعاد على المحور المناسب، فسيكون عدد التكرارات يساوي أكبر عدد صحيح موجب لا يُسبِّب بخروج المحتوى من حاوية gird، مع أخذ قيمة الخاصية <code>[[CSS/grid-gap|grid-gap]]</code> بالحسبان.
+إذا كانت أبعاد حاوية grid محددةً أو كانت لها أكبر أبعاد على المحور المناسب، فسيكون عدد التكرارات يساوي أكبر عدد صحيح موجب لا يُسبِّب بخروج المحتوى من حاوية gird، مع أخذ  الخاصية <code>[[CSS/grid-gap|grid-gap]]</code> بالحسبان.
-=== القيمة <code>auto-fit</code> ===
+===  <code>auto-fit</code> ===
 تشبه عمل الكلمة المحجوزة <code>auto-fill</code>، لكن بعد وضع عناصر grid فسيتم تجاهل المساحة الفارغة.
@@ سطر 136: / سطر 139: @@
 </syntaxhighlight>
+== انظر أيضًا ==
+* صفحة الخاصيات الفرعية التي تضبطها الخاصية <code>[[CSS/grid-template|grid-template]]</code> وهي <code>[[CSS/grid-template-columns|grid-template-columns]]</code> و <code>[[CSS/grid-template-rows|grid-template-rows]]</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/#funcdef-repeat CSS Grid Layout].
-[[تصنيف:CSS]]
+[[تصنيف:CSS|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Property]]
+[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
-[[تصنيف:CSS Grid]]
+[[تصنيف:CSS Grid|{{SUBPAGENAME}}]]