توابع 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
  • auto
  • minmax()
  • fit-content()
  • خطوط نام‌گذاری شده

جزئیات فنی

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

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

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

کروم ایج فایرفاکس سافاری آپرا
57 16 76 10.1 44

مرتبط پیج

مطالبت:CSS گرید-تیمپلیت-کولمن‌پیوتری

مطالبت:CSS گرید-تیمپلیت-رور پیوتری