RAM (ทำซ้ำ, อัตโนมัติ, ขั้นต่ำ)
bookmark_borderbookmark
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
สำหรับตัวอย่างที่ 7 นี้ ให้รวมแนวคิดบางส่วนที่คุณได้เรียนรู้ไปแล้วเกี่ยวกับการสร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์โดยให้มีองค์ประกอบย่อยที่จัดวางโดยอัตโนมัติและยืดหยุ่น เจ๋งมาก คำสำคัญที่ควรจำคือ repeat
, auto-(fit|fill)
และ minmax()
ซึ่งจำได้จากตัวย่อ RAM
เมื่อรวมกันแล้วจะมีลักษณะดังต่อไปนี้
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
คุณกำลังใช้ repeat()
อีกครั้ง แต่ครั้งนี้ใช้คีย์เวิร์ด auto-fit
แทนค่าตัวเลขที่ชัดเจน การดำเนินการนี้จะเปิดใช้การจัดวางองค์ประกอบย่อยเหล่านี้โดยอัตโนมัติ เด็กเหล่านี้มีค่าต่ำสุดพื้นฐานที่ 150px
โดยมีค่าสูงสุดเป็น 1fr
ซึ่งหมายความว่าหน้าจอขนาดเล็กจะใช้ความกว้างเต็ม 1fr
และจะเริ่มเข้าสู่เส้นเดียวกันเมื่อมีความกว้าง 150px
สำหรับแต่ละรายการ
เมื่อใช้ auto-fit
แทร็กที่ไม่มีข้อมูลจะยุบเป็น 0
และแทร็กที่มีการเติมโฆษณาจะมีขนาดเต็มพื้นที่ แต่หากเปลี่ยนเป็น auto-fill
แทร็กเปล่าจะใช้พื้นที่เท่ากับขนาดที่ใช้เมื่อมีการเติมโฆษณา
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
<div class="parent white">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.parent {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2023-10-25 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2023-10-25 UTC"],[],[]]