Auto-fit และ Auto-fill ด้วย minmax
สร้างจำนวนคอลัมน์ที่ปรับตามหน้าจอโดยอัตโนมัติด้วย auto-fit และ auto-fill ร่วมกับ minmax()
Auto-fit และ Auto-fill ด้วย minmax เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
กริดตอบสนองอัตโนมัติ
รูปแบบ CSS Grid ที่ทรงพลังที่สุดคือกริดที่ตอบสนองอย่างเต็มรูปแบบและปรับจำนวนคอลัมน์โดยอัตโนมัติ โดยไม่ต้องใช้คิวรีสื่อใด ๆ ด้วยการใช้ auto-fit หรือ auto-fill ร่วมกับ minmax()
auto-fill
auto-fill เติมแถวด้วยคอลัมน์ให้ได้มากที่สุดเท่าที่จะวางได้เมื่อใช้ขนาดขั้นต่ำที่กำหนด คอลัมน์ว่างจะยังคงอยู่เป็นแทร็กว่างที่ท้ายแถว
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit ทำงานคล้ายกับ auto-fill แต่ ยุบแทร็กว่างให้มีความกว้างเป็นศูนย์ รายการที่มีอยู่จะยืดเพื่อเติมพื้นที่ที่เหลือ
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>ความแตกต่างระหว่าง auto-fill กับ auto-fit
ความแตกต่างนี้จะมีผลเฉพาะเมื่อมีรายการน้อยกว่าจำนวนที่สามารถเติมเต็มแถวได้:
auto-fill: แทร็กคอลัมน์ว่ายังคงอยู่ รายการจะไม่ยืดเพื่อเติมพื้นที่auto-fit: แทร็กว่างจะถูกยุบ รายการจะขยายเพื่อเติมความกว้างที่มีอยู่ทั้งหมด
auto-fit ร่วมกับ minmax()
รูปแบบกริดแบบตอบสนองที่มีชื่อเสียง รายการจะมีความกว้างอย่างน้อย 250px ขยายเพื่อเติมพื้นที่ และขึ้นแถวใหม่โดยอัตโนมัติ:
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>อธิบาย minmax()
minmax(min, max) กำหนดช่วงขนาดของแทร็ก แทร็กจะไม่เล็กกว่า min หรือใหญ่กว่า max เมื่อนำมาใช้ร่วมกับ fr จะสร้างแทร็กที่ยืดหยุ่นและมีขนาดขั้นต่ำเป็นขอบเขต
<div class="track"><div>Flexible track</div></div>auto-fill ร่วมกับ minmax สำหรับรายการขนาดคงที่
เมื่อคุณต้องการให้รายการมีขนาดคงที่และยอมให้มีพื้นที่ว่างอยู่ท้ายแถว:
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>การตอบสนองโดยไม่ใช้คิวรีสื่อ
นี่คือประโยชน์หลัก: repeat(auto-fit, minmax(280px, 1fr)) ปรับจาก 1 คอลัมน์บนอุปกรณ์เคลื่อนที่เป็นจำนวนคอลัมน์มากที่สุดเท่าที่จะวางได้บนหน้าจอขนาดใหญ่โดยอัตโนมัติ:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>ใช้ min() เพื่อให้ minmax ปลอดภัยยิ่งขึ้น
หลีกเลี่ยงปัญหาเลย์เอาต์ในตัวบรรจุขนาดเล็กมากด้วยการใช้ min(100%, 280px) เป็นค่าต่ำสุดแทนการใช้ค่าพิกเซลโดยตรง:
<div class="grid"><div>Item</div></div>auto-fill สำหรับการจัดแนวแบบคล้ายการเรียงอิฐ
เมื่อใช้ auto-fill แทร็กว่างที่ท้ายแถวจะช่วยรักษาการจัดแนวเมื่อจำนวนรายการไม่ใช่พหุคูณของจำนวนคอลัมน์ ซึ่งมีประโยชน์สำหรับกริดที่ต้องการความสม่ำเสมอ
การกำหนดขนาดตามเนื้อหาของกริดเทียบกับเฟล็กซ์บ็อกซ์
flex-wrap + flex: 1 1 250px ของเฟล็กซ์บ็อกซ์มีลักษณะคล้ายกัน แต่ไม่รับประกันว่าคอลัมน์จะมีความกว้างเท่ากัน รายการอาจยืดไม่เท่ากัน ส่วนกริดที่ใช้ minmax จะรับประกันว่าแทร็กมีขนาดเท่ากันอย่างสมบูรณ์
ตรวจสอบอย่างรวดเร็ว
ค่าใดของกริดช่วยสร้างคอลัมน์แบบตอบสนองโดยไม่ใช้คิวรีสื่อ ด้วยการยุบแทร็กว่างเพื่อให้รายการเติมพื้นที่ที่มีอยู่
สรุปทบทวน
repeat(auto-fit, minmax(250px, 1fr)) เป็นรูปแบบกริดแบบตอบสนองที่ทรงพลังที่สุดรูปแบบหนึ่ง โดยไม่ต้องใช้คิวรีสื่อเลย auto-fit ยุบแทร็กว่างเพื่อให้รายการเติมเต็มแถว ส่วน auto-fill จะรักษาแทร็กว่างไว้เพื่อการจัดแนวที่สม่ำเสมอ ควรใช้คู่กับ gap เสมอเพื่อสร้างช่องว่างระหว่างรายการ
คำถามที่พบบ่อย
บทเรียน “Auto-fit และ Auto-fill ด้วย minmax” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Auto-fit และ Auto-fill ด้วย minmax” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Auto-fit และ Auto-fill ด้วย minmax”
สร้างจำนวนคอลัมน์ที่ปรับตามหน้าจอโดยอัตโนมัติด้วย auto-fit และ auto-fill ร่วมกับ minmax() คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “Auto-fit และ Auto-fill ด้วย minmax” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เส้นที่มีชื่อและพื้นที่กริดที่มีชื่อ
- Auto-fit และ Auto-fill ด้วย minmax
- กริดโดยนัยและ Grid-Auto-Flow
- Subgrid สำหรับเนื้อหาซ้อนที่จัดแนวตรงกัน