CSS - การใช้ CSS Grid Layout

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

CSS Grid Layout คืออะไร?

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

ข้อดีของการใช้ CSS Grid Layout

เริ่มต้นใช้งาน CSS Grid Layout

ก่อนอื่นคุณจะต้องกำหนดคอนเทนเนอร์หลักที่ต้องการให้เป็น Grid โดยใช้ property `display: grid;` กับ element นั้นๆ

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  background-color: #8CA1A5;
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

คำอธิบาย:

- `grid-template-columns: repeat(3, 1fr);` กำหนดให้มี 3 คอลัมน์ แต่ละคอลัมน์มีความกว้างเท่าๆ กันโดยใช้ `1fr` ซึ่งหมายถึงหนึ่งส่วนจากทั้งหมดที่เหลือ

- `gap: 10px;` ใช้เพื่อเว้นระยะห่างระหว่างคอลัมน์และแถวเพื่อให้เลย์เอาท์ดูสบายตายิ่งขึ้น

การสร้างเลย์เอาท์ซับซ้อนด้วย CSS Grid

CSS Grid ช่วยให้เราสามารถสร้างเลย์เอาท์ที่ซับซ้อนได้โดยการกำหนดพื้นที่ให้กับแต่ละ element โดยชัดเจน เช่น

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar content content'
    'footer footer footer';
  grid-gap: 15px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

.grid-item {
  background-color: #8CA1A5;
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

การใช้ `grid-template-areas` ช่วยให้เรากำหนดพื้นที่สำหรับแต่ละ element ได้ง่าย เช่น ใน example ข้างต้น เราสร้างเลย์เอาท์แบบสามแถว โดยมี header, sidebar, content และ footer อยู่ในตำแหน่งที่เรากำหนด

ตัวอย่าง Usecase Practical ของ CSS Grid Layout

ในการพัฒนาเว็บสมัยใหม่นั้น CSS Grid สามารถใช้สร้าง layout สำหรับหน้าเว็บบล็อก, อีคอมเมิร์ซ หรือแม้กระทั่ง dashboard ได้ ซึ่งช่วยทำให้การจัดหน้าเพจเป็นเรื่องง่ายและสามารถปรับเปลี่ยนได้ตามต้องการ

ตัวอย่างเช่น การพัฒนาเว็บบล็อกที่มีหัวเรื่องหลัก คุณสมบัติพิเศษคือเราไม่จำเป็นต้องใช้หลายๆ ชั้นโค้ดทับไปมา สามารถทำ layouts ได้จากภายในคอนเทนเนอร์เดียว

สรุป

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

หากคุณสนใจศึกษาเพิ่มเติมเกี่ยวกับ CSS และ Web Development ทาง EPT ยินดีต้อนรับคุณเสมอ! การศึกษาและพัฒนาทักษะด้านโปรแกรมมิงจะไม่เพียงแค่เพิ่มคุณค่าให้คุณในฐานะนักพัฒนาเว็บ แต่ยังช่วยสร้างอนาคตการทำงานที่มั่นคงและก้าวหน้าได้อีกด้วย

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง

หากเจอข้อผิดพลาด หรือต้องการพูดคุย ติดต่อได้ที่ https://m.me/expert.Programming.Tutor/