CSS/repeat

الدالة 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>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    This item is 50 pixels wide.
  </div>
  <div>
    Item with flexible width.
  </div>
  <div>
    Inflexible item of 100 pixels width.
  </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>

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

• مواصفة CSS Grid Layout.