ฟังก์ชัน 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 grid-template-columns ความสามารถ

อ้างอิง:CSS grid-template-rows ความสามารถ