ใช้อย่างใดอย่างหนึ่งauto-fillหรือauto-fitเป็นหมายเลขการทำซ้ำของrepeat()สัญกรณ์
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
auto-fill
เมื่อauto-fillกำหนดให้เป็นหมายเลขการทำซ้ำหากคอนเทนเนอร์กริดมีขนาดที่แน่นอนหรือขนาดสูงสุดในแกนที่เกี่ยวข้องจำนวนของการทำซ้ำจะเป็นจำนวนเต็มบวกที่ใหญ่ที่สุดเท่าที่จะเป็นไปได้ซึ่งจะไม่ทำให้กริดล้นคอนเทนเนอร์กริด
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
กริดจะทำซ้ำแทร็กให้มากที่สุดโดยไม่ต้องล้นคอนเทนเนอร์
ในกรณีนี้จากตัวอย่างด้านบน(ดูภาพ)มีเพียง 5 แทร็กเท่านั้นที่สามารถใส่กริดคอนเทนเนอร์ได้โดยไม่ล้น มีเพียง 4 รายการในตารางของเราดังนั้นรายการที่ห้าจึงถูกสร้างขึ้นเป็นแทร็กว่างภายในพื้นที่ที่เหลือ
พื้นที่ที่เหลือแทร็ก # 6 สิ้นสุดกริดโจ่งแจ้ง ซึ่งหมายความว่ามีพื้นที่ไม่เพียงพอที่จะวางแทร็กอื่น
auto-fit
auto-fitคำหลักที่มีลักษณะการทำงานเช่นเดียวกับการauto-fillยกเว้นว่าหลังจากที่ตำแหน่งรายการตารางอัลกอริทึมแทร็คที่ว่างใด ๆ 0ภายในพื้นที่ที่เหลือจะทรุดลงไป
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 186px);
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
ตารางจะยังคงทำซ้ำเป็นแทร็คให้มากที่สุดเท่าที่เป็นไปได้โดยไม่ต้องล้นภาชนะที่ใช้บรรจุ 0แต่แทร็คที่ว่างเปล่าจะทรุดลงไป
0pxติดตามยุบจะถือว่าเป็นมีฟังก์ชั่นการติดตามการปรับขนาดคงที่
แตกต่างจากauto-fillตัวอย่างรูปภาพแทร็กที่ห้าที่ว่างเปล่าจะถูกยุบและสิ้นสุดกริดที่ชัดเจนหลังจากรายการที่ 4
auto-fill เทียบกับ auto-fit
ความแตกต่างระหว่างทั้งสองจะสังเกตเห็นได้ชัดเจนเมื่อใช้minmax()ฟังก์ชัน
ใช้minmax(186px, 1fr)เพื่อกำหนดช่วงรายการตั้งแต่186pxถึง186pxบวกเศษของพื้นที่ที่เหลือในคอนเทนเนอร์กริด
เมื่อใช้auto-fillไอเทมจะเพิ่มขึ้นเมื่อไม่มีพื้นที่ว่างให้วางแทร็กว่าง
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
เมื่อใช้รายการที่จะเติบโตเพื่อเติมเต็มพื้นที่ที่เหลือเพราะทุกเพลงที่ว่างเปล่าจะทรุดลงไปauto-fit0px
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}
.grid>* {
background-color: green;
height: 200px;
}
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
สนามเด็กเล่น:
กำลังตรวจสอบแทร็กที่เติมอัตโนมัติ
กำลังตรวจสอบแทร็กที่ปรับให้พอดีอัตโนมัติ
grid-template-columns: auto auto auto auto;ทำงานในกรณีนี้หรือไม่ =)