ฟังก์ชัน repeat ใน CSS Grid
หากคุณมีคอลัมน์หลายคอลัมน์
ที่กำหนดให้มีขนาดเดียวกัน
คุณสามารถทำให้การเขียนโค้ดง่ายขึ้นได้โดยใช้
ฟังก์ชัน repeat
พารามิเตอร์แรกของฟังก์ชันนี้ระบุ
จำนวนคอลัมน์ และพารามิเตอร์ที่สองระบุความกว้างของคอลัมน์
มาดูตัวอย่างกัน
ว่ามันทำงานอย่างไร
ตัวอย่าง
สมมติว่าเรามีสามคอลัมน์ที่มี ขนาดเดียวกัน:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
ตัวอย่าง
สมมติว่าเรามีสามคอลัมน์ที่มี ขนาดเดียวกัน และคอลัมน์ที่สี่มีขนาดต่างออกไป:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
ตัวอย่าง
สมมติว่าสามคอลัมน์แรกของเรามี ขนาดหนึ่ง และสามคอลัมน์ถัดไปมีอีกขนาดหนึ่ง:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
ตัวอย่าง
สมมติว่าสามคอลัมน์แรกของเรามี ขนาดหนึ่ง ตามด้วยคอลัมน์อื่น และตามด้วยอีกสาม คอลัมน์ที่มีขนาดต่างออกไป:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
ตัวอย่าง
การทำให้ง่ายขึ้นนี้ใช้ได้กับหน่วย ขนาดใดๆ ก็ได้ สมมติเพื่อตัวอย่างว่าเรา มีสามคอลัมน์ในหน่วยพิกเซล:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
ทำให้การเขียนโค้ดง่ายขึ้นด้วย repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
แบบฝึกหัด
สร้างคอลัมน์ 4 คอลัมน์ที่มีขนาดเดียวกัน
โดยใช้ repeat
สร้างคอลัมน์ 4 คอลัมน์ขนาด 100px
และอีก 3 คอลัมน์ขนาด 2fr
สร้างคอลัมน์ 2 คอลัมน์ขนาด 100px
อีก 3 คอลัมน์ขนาด 200px
ตามด้วยคอลัมน์ขนาด 1fr
และตามด้วย 2 คอลัมน์
ขนาด 10%
