CSS Academy · บทเรียน

หน่วย fr และ Repeat

ใช้หน่วยเศษส่วน fr และฟังก์ชัน repeat() เพื่อสร้างแทร็กกริดที่ยืดหยุ่น

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

หน่วย fr คืออะไร

หน่วย fr (เศษส่วน) ใช้เฉพาะกับ CSS Grid โดยแสดงสัดส่วนของ พื้นที่ว่างที่เหลืออยู่ ในคอนเทนเนอร์กริด หลังจากกำหนดขนาดแทร็กที่ไม่ยืดหยุ่นทั้งหมดแล้ว

ตัวอย่าง fr อย่างง่าย

คอลัมน์สองคอลัมน์ที่มีขนาดเท่ากัน โดยแต่ละคอลัมน์ได้รับพื้นที่ที่มีอยู่ครึ่งหนึ่ง:

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Column 1 (1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Column 2 (1fr)</div>
</div>

แทร็กแบบผสม

พื้นที่สำหรับ fr จะคำนวณหลังจากหักแทร็กที่มีขนาดคงที่ออกแล้ว:

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px sidebar</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>

เศษส่วนไม่เท่ากัน

ค่า fr ที่แตกต่างกันจะสร้างคอลัมน์ตามสัดส่วน:

<div class="thirds" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">25% (1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">50% (2fr)</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">25% (1fr)</div>
</div>

ฟังก์ชัน repeat()

repeat() ช่วยหลีกเลี่ยงการเขียนขนาดแทร็กเดิมซ้ำ ๆ อาร์กิวเมนต์ตัวแรกคือจำนวนครั้ง ส่วนตัวที่สองคือขนาดแทร็ก

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">3</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">4</div>
</div>

repeat() กับแทร็กแบบผสม

คุณสามารถทำซ้ำรูปแบบของแทร็กได้:

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">1fr</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">2fr</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr</div>
  <div style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:12px;border-radius:4px;">2fr</div>
  <div style="background:#b57bff22;border:1px solid #b57bff;padding:12px;border-radius:4px;">1fr</div>
  <div style="background:#3fd0c922;border:1px solid #3fd0c9;padding:12px;border-radius:4px;">2fr</div>
</div>

auto-fill

repeat(auto-fill, ...) จะสร้างคอลัมน์ให้มากเท่าที่ขนาดที่กำหนดสามารถพอดีกับคอนเทนเนอร์ได้ โดยจะเก็บแทร็กว่างไว้ที่ท้ายสุด

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">200px</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">200px</div>
</div>

auto-fit

repeat(auto-fit, ...) ทำงานคล้ายกับ auto-fill แต่จะยุบแทร็กว่าง ทำให้รายการที่มีอยู่ขยายเพื่อเติมคอนเทนเนอร์ได้

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">min 200px, grows</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">min 200px, grows</div>
</div>

minmax() ใน repeat

minmax(min, max) กำหนดช่วงขนาดของแทร็ก เมื่อใช้ร่วมกับ auto-fit จะสร้างกริดที่ตอบสนองต่อขนาดหน้าจอโดยไม่ต้องใช้คิวรีสื่อ:

<div class="responsive-grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Card A</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Card B</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Card C</div>
</div>

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

ต่างจากเปอร์เซ็นต์ตรงที่ fr จะไม่นับรวมพื้นที่ช่องว่างโดยอัตโนมัติ 1fr 1fr ที่มีช่องว่าง 24px จะให้คอลัมน์สองคอลัมน์ที่เท่ากันโดยไม่ต้องคำนวณเอง การคำนวณด้วยเปอร์เซ็นต์ที่เทียบเท่ากันคือ calc(50% - 12px)

fr กับ min-content และ max-content

ใช้ fr ร่วมกับการกำหนดขนาดตามเนื้อหาเพื่อสร้างเค้าโครงแบบผสม:

<div class="grid" style="display:grid;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Label</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Flexible content area</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Action</div>
</div>

ตรวจสอบความเข้าใจ

repeat(auto-fit, minmax(200px, 1fr)) จะสร้างอะไร

สรุปทบทวน

หน่วย fr จัดสรรพื้นที่กริดที่เหลือตามสัดส่วน repeat() ช่วยหลีกเลี่ยงการประกาศแทร็กซ้ำ ๆ รูปแบบ repeat(auto-fit, minmax(250px, 1fr)) ที่มีประสิทธิภาพจะสร้างกริดการ์ดที่ตอบสนองต่อทุกขนาดหน้าจอได้โดยไม่ต้องใช้คิวรีสื่อ

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

บทเรียน “หน่วย fr และ Repeat” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “หน่วย fr และ Repeat”

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

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

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

บทเรียน “หน่วย fr และ Repeat” ใช้เวลานานแค่ไหน

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

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

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

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

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