CSS repeat() 函数

定义和用法

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 grid-template-columns

参考:ປະເພດ CSS grid-template-rows