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 |
ຈຳນວນຕົວເລກ. ພົບກະຕຸ້ນຂອງການປະກອບກັນກະຕຸ້ນວົງກວ້າງ. ສາມາດໃຊ້ຄຳຕັດສິນຕັ້ງຫຼັງນີ້:
|
ລະອຽດເຕັກນິກ
ສະຖານະການ: | ມາດຕະລິງ CSS Grid Layout Module Level 2 |
---|
ການສະແດງຄວາມພະຍາຍາມບັນຊີບັດບານ
ຈຳນວນຕົວເລກໃນຕາຕະລາງສະແດງວ່າສະບາຍການຂອງສະບາຍບັນຊີທີ່ພຽງພໍທຳອິດທີ່ສະແດງ.
ຊຣູມ | ເອດຈ | ຟຣີສ | ຊາຟີ | ໂອເປຣາ |
---|---|---|---|---|
57 | 16 | 76 | 10.1 | 44 |