RAM (ทำซ้ำ, อัตโนมัติ, ขั้นต่ำ)

สำหรับตัวอย่างที่ 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));
}

HTML

<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>
  

CSS

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}