M

MLOG

ไทย

ปลดล็อกพลังของ CSS Grid Layout ด้วยการเรียนรู้การใช้พื้นที่แบบตั้งชื่อ สร้างเลย์เอาต์ที่ยืดหยุ่นและตอบสนองได้อย่างง่ายดายด้วยคู่มือฉบับสมบูรณ์นี้

CSS Grid Areas: การเรียนรู้พื้นที่เลย์เอาต์แบบตั้งชื่อเพื่อการออกแบบที่ตอบสนอง

CSS Grid Layout มอบการควบคุมเลย์เอาต์ของหน้าเว็บได้อย่างเหนือชั้น และหนึ่งในคุณสมบัติที่ทรงพลังที่สุดคือ พื้นที่กริดแบบตั้งชื่อ (named grid areas) สิ่งนี้ช่วยให้นักพัฒนาสามารถกำหนดขอบเขตเชิงตรรกะภายในกริดและกำหนดเนื้อหาให้กับขอบเขตเหล่านั้น ทำให้การสร้างและดูแลรักษาการออกแบบที่ซับซ้อนและตอบสนองได้ง่ายขึ้น คู่มือนี้จะแนะนำคุณเกี่ยวกับพื้นฐานของ CSS Grid Areas พร้อมตัวอย่างและการใช้งานจริงเพื่อช่วยให้คุณเชี่ยวชาญเทคนิคที่จำเป็นนี้

CSS Grid Areas คืออะไร?

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

ลองนึกภาพว่ามันเหมือนกับการวาดแผนผังสำหรับหน้าเว็บของคุณ คุณสามารถกำหนดพื้นที่ต่างๆ เช่น "header", "navigation", "main", "sidebar" และ "footer" แล้วนำเนื้อหาของคุณไปวางในพื้นที่ที่กำหนดไว้ล่วงหน้าเหล่านี้

ประโยชน์ของการใช้ Named Grid Areas

ไวยากรณ์พื้นฐานของ CSS Grid Areas

คุณสมบัติหลักสำหรับการกำหนดพื้นที่กริดแบบตั้งชื่อคือ grid-template-areas คุณสมบัตินี้ใช้ร่วมกับ grid-area เพื่อกำหนดองค์ประกอบให้กับพื้นที่เฉพาะ

นี่คือไวยากรณ์พื้นฐาน:

.grid-container {
 display: grid;
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

.header {
 grid-area: header;
}

.nav {
 grid-area: nav;
}

.main {
 grid-area: main;
}

.aside {
 grid-area: aside;
}

.footer {
 grid-area: footer;
}

ในตัวอย่างนี้ คุณสมบัติ grid-template-areas จะกำหนดเลย์เอาต์กริดขนาด 3x3 แต่ละแถวแทนแถวในกริด และแต่ละคำในแถวแทนคอลัมน์ ชื่อที่กำหนดให้กับแต่ละเซลล์ (เช่น "header", "nav", "main") จะสอดคล้องกับคุณสมบัติ grid-area ที่ใช้กับองค์ประกอบแต่ละรายการ

ตัวอย่างการใช้งานจริงของ CSS Grid Areas

เรามาดูตัวอย่างการใช้งานจริงเพื่อแสดงให้เห็นถึงพลังและความยืดหยุ่นของ CSS Grid Areas

ตัวอย่างที่ 1: เลย์เอาต์เว็บไซต์พื้นฐาน

พิจารณาเลย์เอาต์เว็บไซต์ทั่วไปที่มีส่วนหัว (header), ส่วนนำทาง (navigation), พื้นที่เนื้อหาหลัก (main content), ไซด์บาร์ (sidebar) และส่วนท้าย (footer) นี่คือวิธีที่คุณสามารถนำไปใช้โดยใช้ CSS Grid Areas:

<div class="grid-container">
 <header class="header">Header</header>
 <nav class="nav">Navigation</nav>
 <main class="main">Main Content</main>
 <aside class="aside">Sidebar</aside>
 <footer class="footer">Footer</footer>
</div>

.grid-container {
 display: grid;
 grid-template-columns: 1fr 3fr 1fr; /* ปรับความกว้างคอลัมน์ตามต้องการ */
 grid-template-rows: auto auto 1fr auto; /* ปรับความสูงของแถวตามต้องการ */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 height: 100vh; /* สำคัญเพื่อให้กริดใช้พื้นที่เต็มหน้าจอ */
}

.header {
 grid-area: header;
 background-color: #eee;
 padding: 1em;
}

.nav {
 grid-area: nav;
 background-color: #ddd;
 padding: 1em;
}

.main {
 grid-area: main;
 background-color: #ccc;
 padding: 1em;
}

.aside {
 grid-area: aside;
 background-color: #bbb;
 padding: 1em;
}

.footer {
 grid-area: footer;
 background-color: #aaa;
 padding: 1em;
 text-align: center;
}

ในตัวอย่างนี้ เราได้กำหนดกริดที่มีสามคอลัมน์และสี่แถว แต่ละองค์ประกอบถูกกำหนดให้กับพื้นที่เฉพาะโดยใช้คุณสมบัติ grid-area สังเกตว่าคุณสมบัติ grid-template-areas แสดงเลย์เอาต์ของเว็บไซต์ออกมาเป็นภาพได้อย่างไร

ตัวอย่างที่ 2: การปรับเลย์เอาต์แบบตอบสนอง

หนึ่งในข้อได้เปรียบที่สำคัญของ CSS Grid Areas คือความสามารถในการจัดเรียงเลย์เอาต์ใหม่สำหรับขนาดหน้าจอที่แตกต่างกันได้อย่างง่ายดาย ลองแก้ไขตัวอย่างก่อนหน้าเพื่อสร้างเลย์เอาต์ที่ตอบสนอง

@media (max-width: 768px) {
 .grid-container {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas:
  "header"
  "nav"
  "main"
  "aside"
  "footer";
 }
}

ใน media query นี้ เรากำลังกำหนดเป้าหมายไปที่หน้าจอที่มีขนาดเล็กกว่า 768px เราได้เปลี่ยนเลย์เอาต์กริดเป็นคอลัมน์เดียว โดยเรียงส่วนหัว, ส่วนนำทาง, เนื้อหาหลัก, ไซด์บาร์ และส่วนท้ายในแนวตั้ง ซึ่งทำได้ง่ายๆ เพียงแค่แก้ไขคุณสมบัติ grid-template-areas เท่านั้น

ตัวอย่างที่ 3: เลย์เอาต์ที่ซับซ้อนพร้อมพื้นที่ทับซ้อน

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

.grid-container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "banner banner banner"
  "main main aside"
  "footer footer footer";
}

.banner {
 grid-area: banner;
 background-color: #888;
 color: white;
 padding: 2em;
 text-align: center;
}

ในที่นี้ พื้นที่ banner จะครอบคลุมทั้งสามคอลัมน์ในแถวแรก ซึ่งแสดงให้เห็นถึงความยืดหยุ่นของ CSS Grid Areas ในการสร้างเลย์เอาต์ที่สวยงามและซับซ้อน

เทคนิคขั้นสูงและแนวทางปฏิบัติที่ดีที่สุด

ตอนนี้คุณเข้าใจพื้นฐานของ CSS Grid Areas แล้ว มาดูเทคนิคขั้นสูงและแนวทางปฏิบัติที่ดีที่สุดเพื่อช่วยให้คุณเป็นผู้เชี่ยวชาญด้าน CSS Grid กัน

การใช้สัญลักษณ์ "จุด" สำหรับเซลล์ว่าง

คุณสามารถใช้จุด (.) ในคุณสมบัติ grid-template-areas เพื่อแทนเซลล์ว่างได้ ซึ่งมีประโยชน์สำหรับการสร้างพื้นที่ว่างหรือช่องว่างในเลย์เอาต์ของคุณ

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "header header header"
  "nav . aside"
  "footer footer footer";
}

ในตัวอย่างนี้ เซลล์กลางในแถวที่สองจะถูกปล่อยว่างไว้ ทำให้เกิดช่องว่างระหว่างส่วนนำทางและไซด์บาร์

การรวม grid-template-areas เข้ากับ grid-template-columns และ grid-template-rows

ในขณะที่ grid-template-areas กำหนดโครงสร้างของกริดของคุณ คุณยังคงต้องกำหนดขนาดของคอลัมน์และแถวโดยใช้ grid-template-columns และ grid-template-rows สิ่งสำคัญคือต้องเลือกหน่วยที่เหมาะสม (เช่น fr, px, em, %) ตามความต้องการในการออกแบบของคุณ

ตัวอย่างเช่น:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr; /* หน่วยเศษส่วนสำหรับคอลัมน์ที่ตอบสนอง */
 grid-template-rows: auto 1fr auto; /* ความสูงอัตโนมัติสำหรับส่วนหัวและส่วนท้าย */
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
}

การใช้ grid-gap เพื่อสร้างระยะห่างระหว่างรายการในกริด

คุณสมบัติ grid-gap ช่วยให้คุณสามารถเพิ่มระยะห่างระหว่างรายการในกริดได้อย่างง่ายดาย ซึ่งสามารถปรับปรุงความสวยงามและความสามารถในการอ่านของเลย์เอาต์ของคุณได้

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "header header header"
  "nav main aside"
  "footer footer footer";
 grid-gap: 10px; /* เพิ่มระยะห่าง 10px ระหว่างรายการในกริด */
}

ข้อควรพิจารณาด้านการเข้าถึง (Accessibility)

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

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

ความเข้ากันได้ของเบราว์เซอร์

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

คุณสามารถใช้เครื่องมืออย่าง Can I use... เพื่อตรวจสอบความเข้ากันได้ของเบราว์เซอร์สำหรับ CSS Grid Layout

ตัวอย่างจากโลกจริงและกรณีศึกษา

เรามาดูตัวอย่างจากโลกจริงว่า CSS Grid Areas ถูกนำมาใช้ในการออกแบบเว็บสมัยใหม่อย่างไร

ตัวอย่างที่ 1: การออกแบบเว็บไซต์ข่าวใหม่

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

.news-container {
 display: grid;
 grid-template-columns: 2fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "featured featured"
  "main sidebar"
  "footer footer";
}

.featured {
 grid-area: featured;
}

.main {
 grid-area: main;
}

.sidebar {
 grid-area: sidebar;
}

.footer {
 grid-area: footer;
}

ตัวอย่างที่ 2: การสร้างเว็บไซต์แฟ้มผลงาน (Portfolio)

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

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

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

ตัวอย่างที่ 3: การสร้างหน้าสินค้าสำหรับ E-commerce

หน้าสินค้าอีคอมเมิร์ซโดยทั่วไปประกอบด้วยองค์ประกอบหลายอย่าง รวมถึงรูปภาพสินค้า คำอธิบายสินค้า ข้อมูลราคา และปุ่มเรียกร้องให้ดำเนินการ (call-to-action) สามารถใช้ CSS Grid Areas เพื่อจัดเรียงองค์ประกอบเหล่านี้ในลักษณะที่ชัดเจนและใช้งานง่าย ซึ่งช่วยปรับปรุงประสบการณ์ของผู้ใช้และเพิ่มอัตราการแปลง (conversion rates)

.product-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
  "image description"
  "image details"
  " . cta";
}

.product-image {
 grid-area: image;
}

.product-description {
 grid-area: description;
}

.product-details {
 grid-area: details;
}

.call-to-action {
 grid-area: cta;
 text-align: right;
}

ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง

แม้ว่า CSS Grid Areas จะนำเสนอวิธีการสร้างเลย์เอาต์ที่ทรงพลังและยืดหยุ่น แต่ก็มีข้อผิดพลาดทั่วไปบางประการที่นักพัฒนาควรหลีกเลี่ยง

สรุป

CSS Grid Areas เป็นวิธีที่ทรงพลังและใช้งานง่ายในการสร้างเลย์เอาต์เว็บที่ซับซ้อนและตอบสนองได้ดี ด้วยการทำความเข้าใจพื้นฐานของพื้นที่กริดแบบตั้งชื่อและปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด คุณจะสามารถปลดล็อกศักยภาพสูงสุดของ CSS Grid Layout และสร้างเว็บไซต์ที่สวยงามและใช้งานง่าย ไม่ว่าคุณจะสร้างบล็อกธรรมดาหรือแพลตฟอร์มอีคอมเมิร์ซที่ซับซ้อน CSS Grid Areas สามารถช่วยคุณสร้างเลย์เอาต์ที่ทั้งยืดหยุ่นและดูแลรักษาง่าย

เปิดรับพลังของ CSS Grid Areas และยกระดับทักษะการออกแบบเว็บของคุณไปอีกขั้น ทดลองกับเลย์เอาต์ต่างๆ สำรวจเทคนิคขั้นสูง และมีส่วนร่วมในโลกแห่งการพัฒนาเว็บที่พัฒนาอยู่ตลอดเวลา

แหล่งข้อมูลเพิ่มเติม: