การสร้าง Layout ด้วย CSS Grid

การสร้าง Layout ด้วย CSS Grid

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

CSS Grid คืออะไร?

CSS Grid Layout Module (หรือเรียกสั้นๆ ว่า CSS Grid) คือระบบ Layout แบบสองมิติ (Two-dimensional Layout System) ที่ช่วยให้คุณสามารถควบคุมการจัดเรียงองค์ประกอบต่างๆ บนหน้าเว็บได้อย่างละเอียด ไม่ว่าจะเป็นการสร้าง Layout ที่มีหลายคอลัมน์ หลายแถว หรือการวางองค์ประกอบให้ครอบคลุมหลายช่อง (cell) ใน Grid

ลองนึกภาพตาราง Excel ที่คุณสามารถกำหนดขนาดของแต่ละช่อง (cell) ได้อย่างอิสระ และวางข้อมูลลงในช่องเหล่านั้น CSS Grid ก็คล้ายกัน แต่ทรงพลังกว่ามาก เพราะคุณสามารถปรับแต่ง Layout ได้อย่างยืดหยุ่นด้วย CSS

เริ่มต้นใช้งาน CSS Grid: display: grid

ขั้นตอนแรกในการใช้งาน CSS Grid คือการกำหนด display: grid ให้กับ Container ที่คุณต้องการสร้าง Grid Layout

.container {
  display: grid;
}

เมื่อกำหนด display: grid แล้ว Container นั้นจะกลายเป็น Grid Container และ Element ภายใน Container จะกลายเป็น Grid Items

กำหนดขนาดคอลัมน์และแถว: grid-template-columns และ grid-template-rows

หลังจากกำหนดให้ Container เป็น Grid แล้ว สิ่งต่อไปที่เราต้องทำคือการกำหนดขนาดของคอลัมน์และแถวใน Grid โดยใช้คุณสมบัติ grid-template-columns และ grid-template-rows

grid-template-columns

คุณสมบัตินี้ใช้สำหรับกำหนดขนาดของคอลัมน์ใน Grid โดยระบุค่าความกว้างของแต่ละคอลัมน์ คั่นด้วยช่องว่าง

.container {
  display: grid;
  grid-template-columns: 100px 200px 1fr;
}

ในตัวอย่างนี้ เรากำหนดให้ Grid มี 3 คอลัมน์ โดยคอลัมน์แรกกว้าง 100px, คอลัมน์ที่สองกว้าง 200px และคอลัมน์ที่สามกว้าง 1fr (fractional unit) ซึ่งหมายถึง "หนึ่งส่วนที่เหลือ" คอลัมน์นี้จะขยายจนเต็มพื้นที่ที่เหลือหลังจากคอลัมน์อื่นๆ ถูกจัดวางแล้ว

grid-template-rows

คุณสมบัตินี้ใช้สำหรับกำหนดขนาดของแถวใน Grid โดยระบุค่าความสูงของแต่ละแถว คั่นด้วยช่องว่าง

.container {
  display: grid;
  grid-template-rows: 50px 150px;
}

ในตัวอย่างนี้ เรากำหนดให้ Grid มี 2 แถว โดยแถวแรกสูง 50px และแถวที่สองสูง 150px

ข้อผิดพลาดที่พบบ่อย: ลืมกำหนด grid-template-columns หรือ grid-template-rows ทำให้ Grid แสดงผลไม่ถูกต้อง หรือแสดงผลเป็นเพียงคอลัมน์เดียว

ตัวอย่างการใช้งาน grid-template-columns และ grid-template-rows

สมมติว่าเราต้องการสร้าง Layout ที่มี 3 คอลัมน์ และ 2 แถว โดยมี Header, Content และ Footer

<div class="container">
  <div class="header">Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 คอลัมน์ */
  grid-template-rows: 100px auto 50px; /* 3 แถว */
}

.header {
  background-color: #eee;
}

.content {
  background-color: #ddd;
}

.footer {
  background-color: #ccc;
}

ในตัวอย่างนี้ เรากำหนดให้ Grid มี 3 คอลัมน์ โดยคอลัมน์กลาง (Content) มีขนาดเป็นสองเท่าของคอลัมน์ด้านข้าง (Header และ Footer) และกำหนดให้ Grid มี 3 แถว โดยแถวแรก (Header) สูง 100px, แถวที่สอง (Content) มีความสูงแบบ auto ซึ่งหมายถึงปรับความสูงตามเนื้อหา และแถวที่สาม (Footer) สูง 50px

ข้อควรจำ: หากจำนวน Grid Items มีมากกว่าจำนวนช่อง (cell) ที่กำหนดไว้ใน Grid Items ที่เกินมาจะถูกจัดเรียงในแถวใหม่โดยอัตโนมัติ

การกำหนดช่องว่างระหว่าง Grid Items: grid-gap

คุณสมบัติ grid-gap ใช้สำหรับกำหนดช่องว่างระหว่าง Grid Items ทั้งในแนวตั้งและแนวนอน

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 20px;
}

ในตัวอย่างนี้ เรากำหนดให้มีช่องว่างขนาด 20px ระหว่าง Grid Items ทั้งในแนวตั้งและแนวนอน

Note: grid-gap เป็น Shorthand Property สำหรับ grid-row-gap (ช่องว่างระหว่างแถว) และ grid-column-gap (ช่องว่างระหว่างคอลัมน์) หากต้องการกำหนดช่องว่างในแนวตั้งและแนวนอนให้มีขนาดต่างกัน สามารถใช้ grid-row-gap และ grid-column-gap แยกกันได้

กรณีใช้งานจริง: สร้าง Gallery

ลองนำความรู้ที่ได้เรียนมาสร้าง Gallery ง่ายๆ กัน

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
  <img src="image5.jpg" alt="Image 5">
  <img src="image6.jpg" alt="Image 6">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
}

ในตัวอย่างนี้ เราใช้ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) เพื่อสร้างคอลัมน์จำนวนเท่าที่พอดีกับขนาดของ Container โดยแต่ละคอลัมน์มีความกว้างอย่างน้อย 200px และขยายจนเต็มพื้นที่ที่เหลือ (1fr) auto-fit จะจัดการให้จำนวนคอลัมน์ปรับเปลี่ยนตามขนาดหน้าจอ ทำให้ Gallery ของเราเป็น Responsive โดยอัตโนมัติ

Tip: repeat() function เป็นวิธีที่สะดวกในการกำหนดคอลัมน์หรือแถวที่มีขนาดเท่ากันหลายๆ คอลัมน์/แถว แทนที่จะต้องเขียนขนาดของแต่ละคอลัมน์/แถวซ้ำๆ

สรุป

ในบทนี้ เราได้เรียนรู้พื้นฐานของการใช้งาน CSS Grid ไม่ว่าจะเป็นการกำหนด display: grid, การกำหนดขนาดคอลัมน์และแถวด้วย grid-template-columns และ grid-template-rows และการกำหนดช่องว่างระหว่าง Grid Items ด้วย grid-gap CSS Grid เป็นเครื่องมือที่ทรงพลังในการสร้าง Layout ที่ซับซ้อนและยืดหยุ่น ลองนำความรู้ที่ได้เรียนไปประยุกต์ใช้กับโปรเจกต์ของคุณ เพื่อสร้างสรรค์ Layout ที่สวยงามและตอบโจทย์ความต้องการของคุณ

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการสร้าง Responsive Design ด้วย Media Queries เพื่อให้เว็บไซต์ของเราสามารถแสดงผลได้อย่างสวยงามบนอุปกรณ์ต่างๆ