ฟังก์ชัน repeat ใน CSS Grid

หากคุณมีคอลัมน์หลายคอลัมน์ ที่กำหนดให้มีขนาดเดียวกัน คุณสามารถทำให้การเขียนโค้ดง่ายขึ้นได้โดยใช้ ฟังก์ชัน repeat พารามิเตอร์แรกของฟังก์ชันนี้ระบุ จำนวนคอลัมน์ และพารามิเตอร์ที่สองระบุความกว้างของคอลัมน์ มาดูตัวอย่างกัน ว่ามันทำงานอย่างไร

ตัวอย่าง

สมมติว่าเรามีสามคอลัมน์ที่มี ขนาดเดียวกัน:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

ตัวอย่าง

สมมติว่าเรามีสามคอลัมน์ที่มี ขนาดเดียวกัน และคอลัมน์ที่สี่มีขนาดต่างออกไป:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

ตัวอย่าง

สมมติว่าสามคอลัมน์แรกของเรามี ขนาดหนึ่ง และสามคอลัมน์ถัดไปมีอีกขนาดหนึ่ง:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

ตัวอย่าง

สมมติว่าสามคอลัมน์แรกของเรามี ขนาดหนึ่ง ตามด้วยคอลัมน์อื่น และตามด้วยอีกสาม คอลัมน์ที่มีขนาดต่างออกไป:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

ตัวอย่าง

การทำให้ง่ายขึ้นนี้ใช้ได้กับหน่วย ขนาดใดๆ ก็ได้ สมมติเพื่อตัวอย่างว่าเรา มีสามคอลัมน์ในหน่วยพิกเซล:

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

แบบฝึกหัด