Frontend Academy · บทเรียน

CSS Grid สำหรับการจัดวาง

กำหนดแถวและคอลัมน์ด้วย CSS Grid วางองค์ประกอบอย่างแม่นยำ และสร้างการจัดวางหน้าทั่วไปด้วยโค้ดเพียงเล็กน้อย

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

CSS Grid คืออะไร

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

การกำหนดคอลัมน์: grid-template-columns

grid-template-columns ใช้กำหนดโครงสร้างคอลัมน์ ใช้ขนาดคงที่ (px) เศษส่วนที่ยืดหยุ่น (fr) หรือ auto ได้ ส่วน repeat(n, size) ใช้ทำซ้ำคำจำกัดความของแทร็ก

.layout {
  display: grid;
  grid-template-columns: 240px 1fr; /* sidebar + main */
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}

หน่วย fr

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

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* left center right */
}

การกำหนดแถว: grid-template-rows

คุณสามารถกำหนดแถวอย่างชัดเจนได้เช่นกัน หากไม่กำหนด เบราว์เซอร์จะสร้างแถวโดยนัยโดยอัตโนมัติ grid-auto-rows: minmax(200px, auto) ใช้กำหนดขนาดแถวโดยนัย

.page {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header content footer */
  min-height: 100vh;
}

gap ใน Grid

เช่นเดียวกับ Flexbox gap จะเพิ่มพื้นที่ระหว่างแทร็กกริดโดยไม่กระทบขอบด้านนอก row-gap และ column-gap ใช้ควบคุมแต่ละแกนแยกกัน

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

grid-template-areas

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

.page {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar main main'
    'footer footer footer';
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }

การวางรายการด้วย grid-column และ grid-row

ควบคุมตำแหน่งที่รายการจะอยู่ได้อย่างแม่นยำด้วย grid-column: start / end และ grid-row: start / end ใช้ -1 เพื่ออ้างอิงเส้นสุดท้าย ส่วน span N ใช้ครอบคลุม N แทร็ก

.featured {
  grid-column: 1 / -1;  /* span all columns */
  grid-row: span 2;      /* occupy two rows */
}

auto-fit และ minmax() — คอลัมน์แบบตอบสนอง

คำสั่งบรรทัดเดียวสำหรับกริดแบบตอบสนองที่ทรงพลังที่สุดคือ repeat(auto-fit, minmax(280px, 1fr)) ซึ่งจะสร้างคอลัมน์ให้มากที่สุดเท่าที่วางได้ โดยแต่ละคอลัมน์กว้างอย่างน้อย 280px และเติมพื้นที่ที่เหลือด้วย 1fr

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

auto-fill กับ auto-fit

auto-fill จะสร้างแทร็กแม้แทร็กนั้นจะว่าง ทำให้กริดคงรูปแบบไว้ ส่วน auto-fit จะยุบแทร็กว่างเพื่อให้รายการขยายเต็มแถว ใช้ auto-fit กับเนื้อหาที่ควรขยายให้เต็มพื้นที่

กริดโดยนัยกับกริดที่กำหนดชัดเจน

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

Grid กับ Flexbox — ควรใช้แต่ละอย่างเมื่อใด

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

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

ค่า CSS ใดสร้างคอลัมน์ที่กว้างอย่างน้อย 250px และแบ่งพื้นที่ที่เหลือเท่ากัน

สรุป: CSS Grid

grid-template-columns ใช้กำหนดคอลัมน์ fr ใช้แบ่งพื้นที่ repeat() ช่วยลดความซ้ำซ้อนในการทำซ้ำ gap ใช้เพิ่มช่องว่างระหว่างแทร็ก grid-template-areas ทำให้เค้าโครงอ่านง่าย auto-fit + minmax สร้างกริดแบบตอบสนองได้โดยไม่ต้องใช้มีเดียคิวรี Grid เป็นตัวเลือกหลักสำหรับเค้าโครงหน้าเว็บแบบสองมิติ

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

บทเรียน “CSS Grid สำหรับการจัดวาง” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “CSS Grid สำหรับการจัดวาง”

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

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

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

บทเรียน “CSS Grid สำหรับการจัดวาง” ใช้เวลานานแค่ไหน

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

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

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

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

เมตาแท็ก viewport
Flexbox สำหรับการจัดวาง
CSS Grid สำหรับการจัดวาง
มีเดียคิวรีและการพัฒนาแบบมือถือเป็นอันดับแรก

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