การจัดวางแบบจอกศักดิ์สิทธิ์ด้วย Grid
สร้างการจัดวางแบบจอกศักดิ์สิทธิ์อันคลาสสิก ซึ่งมีส่วนหัว ส่วนท้าย เนื้อหาหลัก และแถบด้านข้างสองด้านด้วย CSS Grid
การจัดวางแบบจอกศักดิ์สิทธิ์ด้วย Grid เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
เค้าโครงจอกศักดิ์สิทธิ์คืออะไร
เค้าโครงจอกศักดิ์สิทธิ์เป็นรูปแบบการออกแบบเว็บแบบคลาสสิก เป็นหน้าที่มีความสูงเต็มพื้นที่ พร้อมส่วนหัว ส่วนท้าย และส่วนกลางสามคอลัมน์ (แถบด้านซ้าย เนื้อหาหลัก และแถบด้านขวา) รูปแบบนี้เคยสร้างได้ยากมากด้วยโฟลต แต่ CSS Grid ทำให้สร้างได้อย่างง่ายดาย
การกำหนดแม่แบบกริด
กำหนดเค้าโครงด้วยพื้นที่แม่แบบและแถวที่ตั้งชื่อ โดย grid-template-areas จะจับคู่โครงสร้างที่มองเห็นได้ สามคอลัมน์และสามแถว (ส่วนหัวครอบคลุมทุกคอลัมน์ ส่วนท้ายครอบคลุมทุกคอลัมน์ และส่วนกลางมีสามคอลัมน์) สามารถอธิบายเค้าโครงทั้งหมดด้วยแผนภาพ ASCII ที่อ่านได้ง่าย
<header>Header</header>
<div class="sidebar">Sidebar</div>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>การกำหนดองค์ประกอบให้กับพื้นที่
องค์ประกอบลูกแต่ละรายการจะอ้างอิงพื้นที่ด้วยชื่อของพื้นที่นั้น: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside } และ footer { grid-area: footer } กริดจะจัดวางองค์ประกอบเหล่านี้โดยอัตโนมัติ
การขยายแถวกลาง
แถวกลางใช้ 1fr ซึ่งเติมความสูงของพื้นที่แสดงผลที่เหลือทั้งหมดหลังจากหักส่วนหัวและส่วนท้ายที่มีความสูงคงที่แล้ว วิธีนี้ทำให้แถบด้านข้างและเนื้อหาหลักขยายเต็มพื้นที่แสดงผลเสมอ โดยไม่ต้องคำนวณความสูงอย่างชัดเจน
การยุบเค้าโครงให้รองรับหน้าจอหลายขนาด
บนอุปกรณ์เคลื่อนที่ ให้ใช้มีเดียคิวรีกำหนดพื้นที่แม่แบบกริดใหม่เป็นการเรียงซ้อนคอลัมน์เดียว ได้แก่ ส่วนหัว แถบด้านข้าง เนื้อหาหลัก แถบด้านข้างรอง และส่วนท้ายที่เรียงในแนวตั้ง ลำดับใน DOM ยังคงเดิม มีเพียงแม่แบบกริดที่มองเห็นได้เท่านั้นที่เปลี่ยน พื้นที่กริดทำให้การปรับโครงสร้างสำหรับหน้าจอหลายขนาดอ่านและเข้าใจได้ง่าย
<header>Header</header>
<div class="sidebar">Sidebar</div>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>การซ่อนแถบด้านข้างตามขนาดหน้าจอ
บนแท็บเล็ต ให้เอาแถบด้านขวาออกและขยายเนื้อหาหลัก โดยกำหนดใหม่เป็น "header header" "sidebar main" "footer footer" พร้อม grid-template-columns: 240px 1fr ตั้งค่า aside { display: none } หรือย้ายแถบด้านข้างรองไปไว้ใต้เนื้อหาหลักในคำจำกัดความของพื้นที่
ช่องว่างและระยะขอบภายใน
เพิ่มช่องว่างระหว่างแทร็กของกริดด้วย gap: var(--spacing-4) ใช้ระยะขอบภายในแต่ละพื้นที่แทนการใช้กับคอนเทนเนอร์กริด เพื่อให้ระยะห่างสม่ำเสมอ โดยทั่วไปส่วนหัวและส่วนท้ายจะมีระยะขอบแนวนอนของตนเอง ซึ่งสอดคล้องกับการจัดแนวความกว้างสูงสุดของกริด
กริดซ้อนกัน
พื้นที่เนื้อหาหลักสามารถเป็นกริดได้เช่นกัน เช่น บทความสองคอลัมน์กับแถบด้านข้างภายในพื้นที่หลัก กริดซ้อนกันช่วยสร้างเค้าโครงเนื้อหาภายในเปลือกหน้าด้วยวิธีที่ไม่ต้องใช้ลำดับชั้นของคลาสที่ซับซ้อนหรือการกำหนดตำแหน่งที่ซ้อนลึก
ส่วนหัวแบบติดตรึง
ทำให้ส่วนหัวติดตรึงด้วย header { position: sticky; top: 0; z-index: 10; } ในเค้าโครงกริด การกำหนดตำแหน่งแบบติดตรึงให้กับองค์ประกอบลูกของกริดจะทำงานตามที่คาดไว้ ส่วนหัวจะติดอยู่ขณะที่เนื้อหาหลัก แถบด้านข้าง และแถบด้านข้างรองเลื่อนอยู่ด้านล่าง
แถบด้านข้างแบบติดตรึงในเค้าโครงจอกศักดิ์สิทธิ์
แถบด้านข้างทั้งสองด้านสามารถติดตรึงได้ด้วย nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; } แถบเหล่านี้จะยังมองเห็นได้ขณะที่เนื้อหาหลักเลื่อน ทำให้เกิดเค้าโครงสามแผงที่มีเพียงส่วนกลางเท่านั้นที่เลื่อน
กริดเทียบกับเฟล็กซ์บ็อกซ์สำหรับเค้าโครงหน้า
ใช้กริดสำหรับเค้าโครงเปลือกหน้าแบบสองมิติ เช่น เค้าโครงจอกศักดิ์สิทธิ์ เพราะกริดเหมาะอย่างยิ่งกับการวางองค์ประกอบลงในแถวและคอลัมน์ที่ตั้งชื่อพร้อมกัน ใช้เฟล็กซ์บ็อกซ์สำหรับเค้าโครงคอมโพเนนต์แบบมิติเดียว เช่น รายการนำทางในแถวหรือเนื้อหาการ์ดในคอลัมน์ ภายในพื้นที่กริด
ตรวจสอบความรู้
เหตุใด grid-template-areas จึงมีประโยชน์เป็นพิเศษสำหรับเค้าโครงจอกศักดิ์สิทธิ์ที่รองรับหน้าจอหลายขนาด
สรุป
CSS Grid ทำให้เค้าโครงจอกศักดิ์สิทธิ์ที่เคยสร้างได้ยากกลายเป็นเรื่องง่าย: grid-template-areas ใช้ตั้งชื่อบริเวณต่าง ๆ, 1fr ในแถวกลางเติมความสูงของพื้นที่แสดงผล และมีเดียคิวรีกำหนดแผนผังพื้นที่ใหม่เพื่อยุบเค้าโครงตามขนาดหน้าจอ ส่วนหัวและแถบด้านข้างแบบติดตรึงสามารถเพิ่มทับลงไปได้โดยไม่เพิ่มความซับซ้อน
คำถามที่พบบ่อย
บทเรียน “การจัดวางแบบจอกศักดิ์สิทธิ์ด้วย Grid” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดวางแบบจอกศักดิ์สิทธิ์ด้วย Grid” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดวางแบบจอกศักดิ์สิทธิ์ด้วย Grid”
สร้างการจัดวางแบบจอกศักดิ์สิทธิ์อันคลาสสิก ซึ่งมีส่วนหัว ส่วนท้าย เนื้อหาหลัก และแถบด้านข้างสองด้านด้วย CSS Grid คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดวางแบบจอกศักดิ์สิทธิ์ด้วย Grid” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การจัดวางส่วนท้ายและแถบด้านข้างแบบติดตำแหน่ง
- การจัดวางแบบจอกศักดิ์สิทธิ์ด้วย Grid
- การจัดวางแบบก่ออิฐ: แนวทาง CSS และ JS
- การออกแบบภายใน: การกำหนดขนาดตามเนื้อหา