ฟังก์ชัน repeat() ใน CSS
- หน้าก่อน CSS rem() ฟังก์ชัน
- หน้าต่อไป CSS repeating-conic-gradient() ฟังก์ชัน
- กลับไปยังด้านบน คู่มืออ้างอิงฟังก์ชัน 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 |
จำเป็น。กำหนดช่องที่จะทำการปฎิสูตรช่องหรือบรรทัดที่จะทำการรอบครอบ。สามารถใช้ค่าต่อไปนี้:
|
รายละเอียดเทคโนโลยี
รุ่น: | CSS Grid Layout Module Level 2 |
---|
การสนับสนุนบราวเซอร์
ตัวเลขในตารางนี้ระบุการเวอร์ชันบราวเซอร์ที่สนับสนุนฟังก์ชันนี้ครั้งแรกทั้งหมด。
ชรอม | เอดจ์ | ฟากซ์ | เซฟารี่ | ออเปร่า |
---|---|---|---|---|
57 | 16 | 76 | 10.1 | 44 |
หน้าที่เกี่ยวข้อง
- หน้าก่อน CSS rem() ฟังก์ชัน
- หน้าต่อไป CSS repeating-conic-gradient() ฟังก์ชัน
- กลับไปยังด้านบน คู่มืออ้างอิงฟังก์ชัน CSS