CSS Academy · บทเรียน

พื้นที่แม่แบบกริด

ตั้งชื่อพื้นที่ของกริดด้วย grid-template-areas เพื่อสร้างการจัดวางที่อ่านง่ายและสื่อความหมาย

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

พื้นที่กริดที่มีชื่อ

grid-template-areas ช่วยให้คุณตั้งชื่อบริเวณต่าง ๆ ของกริดโดยใช้ภาพ ASCII ทำให้เค้าโครงอ่านและดูแลรักษาได้ง่ายมาก

การกำหนดพื้นที่ในเทมเพลต

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

<div class="page" style="min-height:240px;">
  <header style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <aside style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</aside>
  <main style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
  <footer style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>

การวางรายการตามชื่อ

กำหนดรายการกริดให้กับพื้นที่ที่มีชื่อโดยใช้พร็อพเพอร์ตี grid-area พร้อมชื่อพื้นที่ (ไม่ต้องใส่เครื่องหมายคำพูด):

<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'header header' 'sidebar main' 'footer footer';min-height:220px;gap:4px;">
  <header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
  <div class="sidebar" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
  <main style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</main>
  <footer style="background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</footer>
</div>

กฎสำหรับพื้นที่ในเทมเพลต

พื้นที่ที่มีชื่อต้องเป็นรูปสี่เหลี่ยมผืนผ้า แต่ละเซลล์สามารถเป็นส่วนหนึ่งของพื้นที่ได้เพียงหนึ่งพื้นที่เท่านั้น ชื่อพื้นที่ไม่สามารถปรากฏในเซลล์ที่ไม่ติดกันได้ เนื่องจากจะถือว่าไม่ถูกต้อง

เซลล์ว่างด้วย .

ใช้จุดหนึ่งจุดหรือหลายจุดเพื่อระบุเซลล์ว่างใน grid-template-areas:

<div class="layout" style="display:grid;min-height:200px;">
  <div style="grid-area:logo;background:#4f8cff22;border:1px solid #4f8cff;">Logo</div>
  <div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
  <div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
  <div style="grid-area:sidebar;background:#b57bff22;border:1px solid #b57bff;">Sidebar</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>

พื้นที่แบบตอบสนองด้วยคิวรีสื่อ

กำหนด grid-template-areas ใหม่ในคิวรีสื่อ เพื่อปรับโครงสร้างเค้าโครงทั้งหมด:

<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Narrow (default) preview below. Widen your browser to ≥768px to see the media query apply the two-column layout live.</p>
<div class="page" style="min-height:200px;margin-bottom:16px;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>
<p style="font-size:0.85em;color:#888;margin:0 0 8px;">Preview of the ≥768px layout (static reference — not driven by the media query):</p>
<div style="display:grid;grid-template-columns:200px 1fr;grid-template-areas:'header header' 'sidebar main' 'footer footer';gap:4px;min-height:160px;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="grid-area:sidebar;background:#7ee78722;border:1px solid #34c759;padding:8px;">Sidebar</div>
  <div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>

เส้นที่มีชื่อซึ่งสร้างขึ้นโดยอัตโนมัติ

เมื่อคุณตั้งชื่อพื้นที่ CSS จะสร้างเส้นกริดที่มีชื่อโดยอัตโนมัติ ได้แก่ area-start และ area-end สำหรับทั้งแถวและคอลัมน์

<div style="display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr;grid-template-areas:'aside main' 'aside main';gap:0;min-height:160px;">
  <div style="grid-area:aside;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Aside</div>
  <div style="grid-area:main;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content</div>
  <div class="overlay" style="grid-row:1/3;background:rgba(255,99,71,0.3);border:2px dashed tomato;padding:4px;">Overlay via named lines main-start / main-end</div>
</div>

การใช้พื้นที่ร่วมกับหมายเลขเส้น

พื้นที่ที่มีชื่อและหมายเลขเส้นที่กำหนดไว้อย่างชัดเจนสามารถอยู่ร่วมกันในกริดเดียวกันได้ รายการสามารถวางตามชื่อ ตามเส้น หรือโดยใช้ span

ขั้นตอนการออกแบบกริดด้วยภาพ

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

<div class="dashboard" style="display:grid;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;">Header</div>
  <div style="grid-area:nav;background:#ffb84d22;border:1px solid #ffb84d;">Nav</div>
  <div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;">Main</div>
  <div style="grid-area:ads;background:#b57bff22;border:1px solid #b57bff;">Ads</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;">Footer</div>
</div>

พื้นที่ในเทมเพลตกับการเข้าถึง

ลำดับการแสดงผลของกริดอาจแตกต่างจากลำดับแหล่งที่มาของ DOM โปรแกรมอ่านหน้าจอจะทำตามลำดับของ DOM ไม่ใช่ตำแหน่งที่แสดงบนหน้าจอ ตรวจสอบให้แน่ใจว่าลำดับของ DOM มีเหตุผล แม้รายการจะถูกจัดลำดับใหม่ด้วยการวางกริด

ชวเลข grid-template

รวม grid-template-areas, grid-template-columns และ grid-template-rows ไว้ในการประกาศ grid-template เดียว

<div class="page" style="display:grid;min-height:200px;">
  <div style="grid-area:header;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
  <div style="grid-area:sidebar;background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Sidebar</div>
  <div style="grid-area:main;background:#7ee78722;border:1px solid #34c759;padding:8px;">Main</div>
  <div style="grid-area:footer;background:#ff6b6b22;border:1px solid #ff6b6b;padding:8px;">Footer</div>
</div>

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

ใน grid-template-areas ใช้อักขระใดเพื่อระบุเซลล์ว่าง

สรุปทบทวน

grid-template-areas ใช้ภาพ ASCII เพื่อตั้งชื่อบริเวณต่าง ๆ ของเค้าโครง รายการต่าง ๆ จะถูกวางด้วย grid-area: name พื้นที่ต้องเป็นรูปสี่เหลี่ยมผืนผ้า และเซลล์ว่างจะใช้ . กำหนดพื้นที่ใหม่ในคิวรีสื่อเพื่อสร้างเค้าโครงที่ตอบสนองต่อทุกขนาดหน้าจอ พร้อม CSS ที่เป็นระเบียบและอ่านง่าย

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

บทเรียน “พื้นที่แม่แบบกริด” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “พื้นที่แม่แบบกริด”

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

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

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

บทเรียน “พื้นที่แม่แบบกริด” ใช้เวลานานแค่ไหน

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

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

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

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

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