CSS Grid: template-areas, auto-fit และ minmax
ตั้งชื่อพื้นที่กริดเพื่อจัดเลย์เอาต์ให้อ่านง่าย ใช้ auto-fit ร่วมกับ minmax() เพื่อสร้างคอลัมน์ที่ตอบสนองตามขนาดหน้าจอ และควบคุมแทร็กโดยนัย
CSS Grid: template-areas, auto-fit และ minmax เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
พื้นที่แม่แบบที่ตั้งชื่อ — การจัดวางแบบเห็นภาพ
grid-template-areas ช่วยให้คุณตั้งชื่อบริเวณต่าง ๆ ในรูปแบบ ASCII ที่มองเห็นได้ แต่ละสตริงคือหนึ่งแถว และแต่ละคำคือหนึ่งเซลล์ จุด (.) แทนเซลล์ว่าง กำหนดองค์ประกอบด้วย grid-area: name
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }พื้นที่แม่แบบตอบสนองด้วยมีเดียคิวรี
เปลี่ยนรูปแบบการจัดวางของ template-areas ที่จุดเปลี่ยนขนาด เพื่อย้ายแถบด้านข้างจากคอลัมน์หนึ่งไปอยู่ใต้เนื้อหาหลักบนอุปกรณ์เคลื่อนที่
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit เทียบกับ auto-fill
auto-fit: ยุบแทร็กว่างเพื่อให้รายการยืดเต็มแถว auto-fill: คงโครงสร้างกริดไว้แม้แทร็กจะว่าง สำหรับกริดการ์ดแบบตอบสนอง auto-fit เป็นตัวเลือกที่คุณต้องการเกือบทุกครั้ง
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}เจาะลึก minmax()
minmax(min, max) กำหนดแทร็กที่มีขนาดอย่างน้อย min และไม่เกิน max การใช้ร่วมกันที่พบบ่อย ได้แก่ minmax(0, 1fr) (ยืดหยุ่นเต็มที่), minmax(200px, 1fr) (ตอบสนองโดยมีค่าขั้นต่ำ) และ minmax(auto, auto) (กำหนดขนาดตามเนื้อหา)
การครอบคลุมคอลัมน์และแถว
ใช้ grid-column: span 2 เพื่อให้รายการครอบคลุมสองคอลัมน์ ใช้ร่วมกับ grid-row: span 2 เพื่อสร้างรายการเด่นที่ครอบคลุมบล็อกขนาด 2×2 ในกริด
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}การวางอัตโนมัติแบบหนาแน่น
grid-auto-flow: dense เติมช่องว่างที่เหลือด้วยรายการขนาดเล็กกว่า มีประโยชน์สำหรับรูปแบบการจัดวางคล้ายการเรียงอิฐ ซึ่งรายการมีขนาดแตกต่างกัน
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}หน่วยเศษส่วนและเปอร์เซ็นต์
หน่วย fr จะอ้างอิงพื้นที่ว่างที่เหลือหลังจากหักแทร็กขนาดคงที่และช่องว่างออกแล้วเสมอ การผสม fr กับขนาดคงที่ทำให้มีความยืดหยุ่นสูงสุด เช่น แถบด้านข้างขนาดคงที่และเนื้อหาหลักที่ยืดหยุ่น
grid-auto-columns และ grid-auto-rows
สิ่งเหล่านี้ควบคุมขนาดของแทร็กที่สร้างขึ้นโดยปริยาย (เมื่อวางรายการไว้นอกกริดที่กำหนดไว้อย่างชัดเจน) grid-auto-rows: minmax(100px, auto) จะกำหนดความสูงขั้นต่ำให้แถวโดยปริยาย
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}การตรวจสอบกริดใน DevTools
Chrome DevTools จะแสดงเส้นกริดและชื่อพื้นที่ซ้อนทับบนหน้า เมื่อคุณคลิกป้าย “grid” ถัดจากคอนเทนเนอร์กริดในแผง Elements ใช้สิ่งนี้เพื่อแก้ไขปัญหาขนาดแทร็กและการวางรายการที่ไม่เป็นไปตามคาด
กริดย่อยของ CSS
grid-template-columns: subgrid ช่วยให้กริดที่ซ้อนอยู่จัดแนวตามแทร็กของกริดแม่ได้ รองรับในเบราว์เซอร์รุ่นใหม่ทั้งหมดตั้งแต่ปี 2023 และจำเป็นสำหรับการจัดแนวองค์ประกอบภายในการ์ดให้ตรงกันตลอดทั้งกริดการ์ด
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}เมื่อกริดเหมาะกว่าเฟล็กซ์บ็อกซ์
กริดเหมาะที่สุดเมื่อคุณต้องการควบคุมสองมิติอย่างชัดเจน หรือเมื่อทั้งแถวและคอลัมน์มีความสำคัญ หากคุณเพียงต้องการจัดรายการเป็นแถวหรือกองซ้อน เฟล็กซ์บ็อกซ์จะเรียบง่ายกว่า
ตรวจสอบอย่างรวดเร็ว
ค่าใดของ CSS Grid ที่สร้างคอลัมน์ให้ได้มากที่สุด โดยแต่ละคอลัมน์มีขนาดขั้นต่ำ 200px และแบ่งพื้นที่ที่เหลือเท่ากัน
ทบทวน: CSS Grid ขั้นสูง
grid-template-areas สร้างรูปแบบการจัดวางที่ตั้งชื่อและอ่านง่าย auto-fit ร่วมกับ minmax สร้างกริดแบบตอบสนองโดยไม่ต้องใช้มีเดียคิวรี ทำให้รายการครอบคลุมหลายคอลัมน์และหลายแถว การวางอัตโนมัติแบบหนาแน่นช่วยเติมช่องว่าง ใช้โอเวอร์เลย์กริดของ DevTools เพื่อแก้ไขข้อผิดพลาด และใช้กริดย่อยเพื่อจัดแนวรายการที่ซ้อนอยู่กับแทร็กแม่
คำถามที่พบบ่อย
บทเรียน “CSS Grid: template-areas, auto-fit และ minmax” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “CSS Grid: template-areas, auto-fit และ minmax” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “CSS Grid: template-areas, auto-fit และ minmax”
ตั้งชื่อพื้นที่กริดเพื่อจัดเลย์เอาต์ให้อ่านง่าย ใช้ auto-fit ร่วมกับ minmax() เพื่อสร้างคอลัมน์ที่ตอบสนองตามขนาดหน้าจอ และควบคุมแทร็กโดยนัย คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “CSS Grid: template-areas, auto-fit และ minmax” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เจาะลึก Flexbox: การจัดแนว การตัดบรรทัด และลำดับ
- CSS Grid: template-areas, auto-fit และ minmax
- การใช้ Flexbox และ Grid ร่วมกัน
- ตัวแปร CSS สำหรับการกำหนดธีม