CSS Academy · บทเรียน

repeat() และ minmax() ในกริด

สร้างแทร็กกริดหลายรายการและกำหนดช่วงขนาดที่ยืดหยุ่นด้วย repeat() และ minmax()

บทเรียน 3 จาก 413 ขั้นตอน

repeat() และ minmax() ในกริด เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

repeat() ในบริบทของ Grid

repeat(count, track-size) เป็นฟังก์ชัน CSS Grid ที่สร้างคำจำกัดความของแทร็กหลายรายการโดยไม่ต้องเขียนซ้ำ ใช้ภายใน grid-template-columns และ grid-template-rows ได้

repeat() พร้อมจำนวนตายตัว

สร้างคอลัมน์ที่มีขนาดเท่ากัน 4 คอลัมน์:

  <div class="grid">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

repeat() พร้อมรูปแบบ

ทำซ้ำรูปแบบของแทร็ก:

  <div class="striped-grid">
    <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
  </div>

minmax() ภายในแทร็ก

minmax(min, max) กำหนดช่วงขนาดของแทร็ก:

  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
  </div>

auto-fit กับ minmax()

รูปแบบกริดแบบตอบสนองตามขนาด:

  <div class="cards">
    <div>Card A</div><div>Card B</div>
  </div>

minmax(min-content, max-content)

ขนาดแทร็กสามารถใช้คีย์เวิร์ดการกำหนดขนาดตามเนื้อหาได้:

  <div class="labels">
    <div>Label</div><div>Value</div>
  </div>

minmax() ในแถว

ใช้ minmax() กับแถว เพื่อให้ความสูงปรับตามเนื้อหาโดยมีขีดจำกัดล่าง:

  <div class="gallery"><div>1</div><div>2</div></div>

fit-content() สำหรับคอลัมน์

fit-content(max) ทำให้แทร็กกว้างเท่ากับเนื้อหาของแทร็ก แต่ไม่เกินค่าสูงสุดที่กำหนด คล้ายกับ max-content แต่มีการจำกัดค่าสูงสุด:

  <div class="layout"><div>Sidebar</div><div>Main</div></div>

การรวม repeat() กับเส้นที่มีชื่อ

ทำซ้ำเส้นที่มีชื่อเพื่ออ้างอิงคอลัมน์แต่ละคอลัมน์ด้วยชื่อ:

  <div class="grid">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

auto-fill กับ minmax สำหรับรายการขนาดตายตัว

เมื่อรายการไม่ควรยืดเกินขนาดตามธรรมชาติ:

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div>
  </div>

fr เทียบกับเปอร์เซ็นต์ใน Grid

ต่างจากเปอร์เซ็นต์ หน่วย fr จะคำนึงถึงพื้นที่ของ gap โดยอัตโนมัติ repeat(3, 1fr) ร่วมกับ gap: 24px จึงให้คอลัมน์ที่มีขนาดเท่ากันอย่างแท้จริง 3 คอลัมน์ ส่วนเปอร์เซ็นต์จะต้องใช้ calc() เพื่อลบพื้นที่ของ gap

ตรวจสอบอย่างรวดเร็ว

repeat(3, minmax(100px, 1fr)) กำหนดอะไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

repeat(count, track) สร้างแทร็กหลายรายการโดยไม่ต้องเขียนซ้ำ minmax(min, max) กำหนดช่วงขนาดแทร็กแบบยืดหยุ่น รูปแบบ repeat(auto-fit, minmax(280px, 1fr)) เป็นกริดแบบตอบสนองตามขนาดที่ทรงพลังที่สุด โดยไม่ต้องใช้มีเดียคิวรีและปรับคอลัมน์ตามขนาดโดยอัตโนมัติ ใช้ fit-content(max) สำหรับคอลัมน์แถบด้านข้างที่ปรับตามเนื้อหา

เริ่มต้นได้ฟรี

เรียนรู้ CSS ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “repeat() และ minmax() ในกริด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “repeat() และ minmax() ในกริด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “repeat() และ minmax() ในกริด”

สร้างแทร็กกริดหลายรายการและกำหนดช่วงขนาดที่ยืดหยุ่นด้วย repeat() และ minmax() คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “repeat() และ minmax() ในกริด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม

ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

calc() สำหรับการคำนวณแบบไดนามิก
min() max() และ clamp() สำหรับค่าแบบยืดหยุ่น
repeat() และ minmax() ในกริด
color-mix() และไวยากรณ์สีแบบสัมพัทธ์

← กลับไปที่ CSS Academy