توابع repeat() CSS

تعریف و استفاده

CSS repeat() تابع برای تکرار یک مجموعه از ستون‌ها یا ردیف‌ها در شبکه استفاده می‌شود.

اگر تعداد زیادی ردیف یا ستون در شبکه شما وجود دارد، این تابع بسیار مفید است. با استفاده از این تابع، می‌توانید یک «الگوی تکرار» ایجاد کنید که می‌توانید از آن استفاده کنید.

این تابع با grid-template-columns ویژگی‌ها و grid-template-rows ویژگی‌ها با هم استفاده شوند.

مثال

مثال 1

با استفاده از repeat() تکرار یک مجموعه از ستون‌ها در شبکه:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

آزمایش کنید

مثال 2

با استفاده از repeat() تکرار یک مجموعه از ستون‌ها در شبکه:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

آزمایش کنید

نحوه‌ی نوشتن CSS

repeat(repeat-count, tracks)
مقدار توضیح
repeat-counts

ضروری. تعیین کنید که ستون‌ها یا ردیف‌ها چند بار باید تکرار شوند.

می‌تواند عددی از 1 یا بزرگتر باشد یا کلیدهای auto-fill یا auto-fit (که ستون‌ها/ردیف‌ها را بر اساس نیاز تکرار می‌کنند تا کانترولر شبکه‌ای را پر کنند).
tracks

ضروری. تعیین کنید که کدام ستون‌ها یا مجموعه‌های ردیف تکرار شوند. می‌توانید از یکی از موارد زیر استفاده کنید:

  • مقیاس‌های طول (px, em, %, fr, ch)
  • min-content
  • max-content
  • آوتو
  • minmax()
  • fit-content()
  • خط‌های نام‌گذاری شده

جزئیات فنی

نسخه: مستند CSS Grid Layout Module Level 2

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه‌ای از مرورگر هستند که این عملکرد را کاملاً پشتیبانی می‌کند.

کروم ایج فایرفاکس سفاری опера
57 16 76 10.1 44

صفحات مرتبط

ارجاع:ویژگی CSS grid-template-columns

ارجاع:ویژگی CSS grid-template-rows