CSS Academy · บทเรียน

Display Grid และคอลัมน์กับแถวแม่แบบ

เปิดใช้ CSS Grid และกำหนดแทร็กคอลัมน์กับแถวด้วย grid-template-columns และ rows

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

การเปิดใช้กริด CSS

เปิดใช้กริด CSS โดยกำหนด display: grid ให้กับคอนเทนเนอร์ องค์ประกอบลูกโดยตรงจะกลายเป็น รายการกริด และถูกวางลงในเซลล์โดยอัตโนมัติ

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

grid-template-columns

grid-template-columns กำหนดจำนวนและขนาดของคอลัมน์ แต่ละค่าจะสร้างแทร็กคอลัมน์หนึ่งแทร็ก

<div class="layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</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>

grid-template-rows

grid-template-rows กำหนดแทร็กแถวที่ระบุไว้อย่างชัดเจน รายการที่เกินจำนวนแถวที่กำหนดจะสร้างแถวโดยนัย

<div class="layout" style="min-height:220px;">
  <div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
  <div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>

แทร็กคอลัมน์และแถว

แต่ละค่าใน grid-template-columns หรือ grid-template-rows จะสร้างแทร็กหนึ่งแทร็ก แทร็กสามารถใช้หน่วยขนาดใดก็ได้:

ค่าคงที่: 200px, 10rem
ค่าที่ยืดหยุ่น: 1fr
ค่าตามเนื้อหา: auto, min-content, max-content

หน่วย fr

fr (หน่วยเศษส่วน) จัดสรรพื้นที่ที่มีอยู่หลังจากหักขนาดคงที่ออกแล้ว 1fr 2fr จะสร้างคอลัมน์ในอัตราส่วน 1:2

<div class="grid">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
  <div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>

ค่า auto ในแทร็ก

auto ในแทร็กจะกำหนดขนาดให้พอดีกับเนื้อหา เมื่อเป็นคอลัมน์ จะใช้พื้นที่ขั้นต่ำที่เซลล์ซึ่งกว้างที่สุดต้องการ ส่วนเมื่อเป็นแถว จะปรับให้พอดีกับเซลล์ที่สูงที่สุด

<div class="sidebar-layout">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>

ตัวอย่างเค้าโครงหน้าเว็บ

เค้าโครงหน้าเว็บสามแถวที่พบบ่อย ซึ่งประกอบด้วยส่วนหัว เนื้อหาหลัก และส่วนท้าย:

<div class="page">
  <header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
  <footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>

ชวเลข grid-template

grid-template ใช้รวมแถวและคอลัมน์เข้าด้วยกัน:

<div class="grid" style="display:grid;min-height:180px;">
  <div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>

การตรวจสอบกริดใน DevTools

DevTools ของ Chrome และ Firefox สามารถ แสดงเส้นแทร็กของกริดซ้อนทับบนหน้าเว็บ ได้ คลิกป้ายกริดในแผง Elements เพื่อแสดงคอลัมน์ แถว ช่องว่าง และพื้นที่ที่มีชื่อ

การเลือกระหว่างกริดกับ Flexbox

ใช้กริดเมื่อต้องควบคุมทั้งแถวและคอลัมน์พร้อมกัน ใช้ Flexbox สำหรับเค้าโครงแบบมิติเดียว (แถวของรายการหรือคอลัมน์ของรายการ) เค้าโครงจำนวนมากใช้ทั้งสองแบบร่วมกัน

หมายเลขเส้น

กริดจะกำหนดหมายเลขให้เส้นโดยอัตโนมัติ โดยเริ่มจาก 1 คุณสามารถใช้หมายเลขเหล่านี้เป็น reference เพื่อวางรายการด้วยตนเอง เส้นคอลัมน์จะมีหมายเลขตั้งแต่ 1 ถึง n+1 โดย n คือจำนวนคอลัมน์

<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
  <div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
  <div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
  <div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>

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

grid-template-columns: 200px 1fr 2fr จะสร้างอะไร

สรุปทบทวน

display: grid จะสร้างคอนเทนเนอร์กริด ส่วน grid-template-columns และ grid-template-rows จะกำหนดแทร็ก หน่วย fr จัดสรรพื้นที่ที่เหลือตามสัดส่วน ส่วน auto จะกำหนดขนาดตามเนื้อหา กริดเหมาะอย่างยิ่งสำหรับการควบคุมเค้าโครงแบบสองมิติ

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

บทเรียน “Display Grid และคอลัมน์กับแถวแม่แบบ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Display Grid และคอลัมน์กับแถวแม่แบบ”

เปิดใช้ CSS Grid และกำหนดแทร็กคอลัมน์กับแถวด้วย grid-template-columns และ rows คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

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

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

บทเรียน “Display Grid และคอลัมน์กับแถวแม่แบบ” ใช้เวลานานแค่ไหน

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

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

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

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

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