เส้นที่มีชื่อและพื้นที่กริดที่มีชื่อ
ตั้งชื่อเส้นและพื้นที่กริดเพื่อให้การจัดวางกริดอ่านง่ายและบำรุงรักษาได้ง่ายขึ้น
เส้นที่มีชื่อและพื้นที่กริดที่มีชื่อ เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
การตั้งชื่อเส้นกริด
สามารถตั้งชื่อเส้นกริดภายในวงเล็บเหลี่ยมใน grid-template-columns และ grid-template-rows ได้ เส้นที่มีชื่อทำให้โค้ดสำหรับจัดวางอ่านง่ายกว่าการใช้ตัวเลขดิบ
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>การจัดวางรายการด้วยเส้นที่มีชื่อ
ใช้เส้นที่มีชื่อใน grid-column และ grid-row เพื่อให้การจัดวางอ่านเข้าใจง่าย:
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>ชื่อเส้นที่มี -start และ -end
เมื่อกำหนดพื้นที่ที่มีชื่อด้วย grid-template-areas CSS จะสร้างเส้นที่มีชื่อพร้อมส่วนต่อท้าย -start และ -end โดยอัตโนมัติ ซึ่งสามารถนำไปอ้างอิงได้
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>เส้นที่มีชื่อซ้ำ
เมื่อใช้ repeat() สามารถใส่ชื่อไว้ภายในรูปแบบที่ทำซ้ำได้ เส้นจะได้รับส่วนต่อท้ายที่เป็นตัวเลขเพื่อแยกความแตกต่าง
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>การครอบคลุมด้วยเส้นที่มีชื่อ
ใช้เส้นที่มีชื่อร่วมกับ span เพื่อครอบคลุมแทร็กที่มีชื่อจำนวนหนึ่งตามต้องการ:
<div class="grid">
<div class="header">Header spans 3</div>
<div>A</div><div>B</div><div>C</div>
</div>สรุปพื้นที่ที่มีชื่อ
พื้นที่ที่มีชื่อ (ผ่าน grid-template-areas) เป็นแนวทางที่อ่านเข้าใจง่ายที่สุดสำหรับจัดตำแหน่งรายการ:
<div class="page">
<header>Header</header>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>เส้นที่มีชื่อสำหรับเลย์เอาต์ซับซ้อน
เส้นที่มีชื่อเหมาะอย่างยิ่งสำหรับเลย์เอาต์แบบบทบรรณาธิการที่ซับซ้อน ซึ่งมีองค์ประกอบหลายรายการครอบคลุมหลายช่อง:
<div class="magazine">
<div class="full-bleed">Full bleed banner</div>
<div class="article">Article content</div>
</div>การผสานชื่อและตัวเลข
สามารถใช้เส้นที่มีชื่อและหมายเลขเส้นผสมกันได้อย่างอิสระในกริดเดียวกัน:
<div class="layout"><div class="item">Item</div></div>หลายชื่อในเส้นเดียว
เส้นเดียวสามารถมีหลายชื่อได้ ซึ่งมีประโยชน์เมื่อเส้นนั้นทำหน้าที่เป็นทั้งจุดสิ้นสุดของพื้นที่หนึ่งและจุดเริ่มต้นของอีกพื้นที่หนึ่ง:
<div class="grid">
<div>Sidebar</div>
<div>Content</div>
</div>เส้นที่มีชื่อโดยปริยายจากพื้นที่
หากกำหนดพื้นที่ที่มีชื่อว่า "main" ระบบจะสร้างเส้น main-start (ทั้งคอลัมน์และแถว) และ main-end ให้โดยอัตโนมัติ ทำให้สามารถใช้เส้นเหล่านี้กับรายการที่ซ้อนทับกันได้
การแก้จุดบกพร่องของเส้นที่มีชื่อใน DevTools
DevTools ของโครมและไฟร์ฟอกซ์สามารถแสดงเส้นกริดที่มีชื่อเป็นป้ายกำกับบนชั้นซ้อนทับได้ เปิดใช้ป้ายกำกับเส้นในแผงเค้าโครงเพื่อตรวจสอบว่าชื่อถูกต้อง
ตรวจสอบอย่างรวดเร็ว
เมื่อกำหนดพื้นที่กริดที่มีชื่อว่า "sidebar" ใน grid-template-areas ระบบจะสร้างชื่อเส้นใดโดยอัตโนมัติ
สรุปทบทวน
ตั้งชื่อเส้นกริดภายในวงเล็บเหลี่ยมในคำจำกัดความของแทร็ก เพื่อให้การจัดวางอ่านเข้าใจง่าย พื้นที่ที่มีชื่อจะสร้างชื่อเส้น -start และ -end โดยอัตโนมัติ เส้นเดียวสามารถมีหลายชื่อได้ เส้นที่มีชื่อสามารถใช้ร่วมกับ span และตัวเลขได้อย่างอิสระ ใช้ DevTools เพื่อแสดงเส้นที่มีชื่อเป็นชั้นซ้อนทับ
คำถามที่พบบ่อย
บทเรียน “เส้นที่มีชื่อและพื้นที่กริดที่มีชื่อ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เส้นที่มีชื่อและพื้นที่กริดที่มีชื่อ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เส้นที่มีชื่อและพื้นที่กริดที่มีชื่อ”
ตั้งชื่อเส้นและพื้นที่กริดเพื่อให้การจัดวางกริดอ่านง่ายและบำรุงรักษาได้ง่ายขึ้น คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “เส้นที่มีชื่อและพื้นที่กริดที่มีชื่อ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เส้นที่มีชื่อและพื้นที่กริดที่มีชื่อ
- Auto-fit และ Auto-fill ด้วย minmax
- กริดโดยนัยและ Grid-Auto-Flow
- Subgrid สำหรับเนื้อหาซ้อนที่จัดแนวตรงกัน