พื้นที่กริดของ CSS

 (ishadeed.com)
2 คะแนน โดย GN⁺ 2024-08-17 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

บทนำ

  • CSS Grid ได้รับการรองรับจากเบราว์เซอร์หลักทั้งหมดมาตั้งแต่ปี 2017
  • อย่างไรก็ตาม แม้ในปี 2024 ก็ยังมีหลายคนที่ไม่ได้ใช้ความสามารถ grid-template-areas
  • บทความนี้ต้องการอธิบายทั้งความเรียบง่ายและพลังของ grid-template-areas

พื้นที่กริดแบบตั้งชื่อใน CSS

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

กฎของพื้นที่เทมเพลตกริด

  • พื้นที่ที่กำหนดต้องมีรูปทรงเป็นสี่เหลี่ยมผืนผ้า
  • ต้องกำหนดทุกพื้นที่ให้ครบถ้วน

ไวยากรณ์ของเทมเพลตกริด

  • ต้องใช้พร็อพเพอร์ตี grid-template-areas เพื่อกำหนดพื้นที่กริด
  • สามารถใช้สตริงของพื้นที่ได้หลายชุด
  • สตริงเดี่ยวหมายถึงเลย์เอาต์แบบ 1 มิติ ส่วนหลายสตริงหมายถึงเลย์เอาต์แบบหลายมิติ

เส้นกริดแบบตั้งชื่อใน CSS

  • สามารถกำหนดชื่อเฉพาะให้กับเส้นกริดได้
  • ตัวอย่างเช่น ในกริดที่มี 3 คอลัมน์ สามารถตั้งชื่อให้แต่ละเส้นได้
  • เส้นกริดแบบตั้งชื่อไม่ได้มาแทนที่หมายเลขเส้นแบบปกติ

กรณีการใช้งานของพื้นที่เทมเพลตกริด

  • การสลับทิศทางกริด: ใช้ grid-template-areas เพื่อเปลี่ยนทิศทางของเลย์เอาต์ได้อย่างง่ายดาย
  • เลย์เอาต์ส่วนหัว: ใช้ grid-template-areas เพื่อกำหนดเลย์เอาต์ของส่วนหัวและทำให้ตอบสนองได้
  • เลย์เอาต์งานบรรณาธิการ: สามารถกำหนดและปรับเปลี่ยนเลย์เอาต์ที่มีคอนเทนต์หลายประเภทได้อย่างง่ายดาย

เลย์เอาต์แบบมีเงื่อนไขและ CSS :has()

  • สามารถใช้ตัวเลือก :has() ของ CSS เพื่อเปลี่ยนเลย์เอาต์ตามการมีอยู่ขององค์ประกอบ

การรองรับหลายภาษา (LTR/RTL)

  • CSS Grid จะปรับเลย์เอาต์ตามทิศทางของหน้า (LTR หรือ RTL)
  • นั่นหมายความว่าพื้นที่กริดแบบตั้งชื่อก็จะเป็นไปตามทิศทางของหน้าด้วย

พื้นที่กริดและ DevTools

  • เบราว์เซอร์หลักทั้งหมดมีเครื่องมือที่ดีสำหรับพื้นที่กริด (Chrome, Safari, Firefox)
  • แต่ละเบราว์เซอร์มีวิธีแสดงภาพพื้นที่กริดแตกต่างกัน

สรุปโดย GN⁺

  • ความสามารถ grid-template-areas ของ CSS Grid มีประโยชน์ในการทำความเข้าใจและจัดการเลย์เอาต์ในเชิงภาพ
  • มีประโยชน์อย่างยิ่งเมื่อสมาชิกในทีมต้องปรับเปลี่ยนเลย์เอาต์
  • บทความนี้อธิบายทั้งความเรียบง่ายและพลังของ grid-template-areas และต้องการกระตุ้นให้มีผู้ใช้ฟีเจอร์นี้มากขึ้น
  • โปรเจ็กต์อื่นที่มีความสามารถคล้ายกันคือ Flexbox

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-08-17
ความเห็นจาก Hacker News

  • สนใจเดโมแอนิเมชัน แต่ไม่ได้ทำด้วย CSS

    • เคยเรียน Flexbox แล้วก็พอใจ จึงไม่เคยรู้สึกว่าจำเป็นต้องเรียน Grid
    • มีเหตุผลที่ทำให้ชอบ Grid ได้ แต่ในทางปฏิบัติยังไม่เคยรู้สึกว่าจำเป็น
    • สำหรับตารางข้อมูลก็ใช้ตารางจริง

  • บทความนี้เน้นข้อดีของ Grid และความยุ่งยากของไวยากรณ์ CSS

    • มีสองมิติและพารามิเตอร์สามตัว (เริ่มต้น, สิ้นสุด, ขนาด)
    • แต่ละพารามิเตอร์มีวิธีประกาศอย่างน้อยสามแบบ
    • คุณสมบัติแบบย่อทำให้อ่านยาก
    • อ่าน Grid ที่นักพัฒนาคนอื่นเขียนไว้ได้ยาก

  • 1/3 ไม่ใช่เศษส่วน แต่เป็นช่วงตั้งแต่ 1 ถึง 3

    • ไม่เข้าใจว่าทำไมถึงเลือกไวยากรณ์แบบนี้
    • ในการเขียนโปรแกรมมีไวยากรณ์ที่ดีกว่าสำหรับการแสดงช่วงอยู่แล้ว (เช่น 1..3)

  • เกี่ยวกับ Grid Garden และ Flexbox Froggy

  • ไม่เคยเข้าใจ Grid หรือ Flexbox มาก่อน

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

  • สงสัยว่ามีเวอร์ชันปูพื้นของเอกสารนี้หรือไม่

    • หลงทางตั้งแต่ส่วนเกริ่นนำ
    • ไม่เข้าใจว่า line number คืออะไร
    • ติดอยู่กับเศษส่วนอย่าง 1/3 และ 1/4

  • ขอแนะนำ Mondrian with auto flow ของ Jen Simmons อย่างมาก

    • Jen Simmons Mondrian
    • ลองปรับขนาดหน้าต่างดูแล้วเจ๋งมาก
    • อยากเข้าใจว่ามันตรวจจับและเติมช่องว่างใน auto flow อย่างไร

  • สงสัยว่าทำไมถึงกำหนดไวยากรณ์เป็น 1/2 และ 3/4

    • รู้สึกว่าไวยากรณ์อย่าง 1-2 หรือ 1->2 น่าจะเข้าใจง่ายกว่า

  • ชอบบล็อกโพสต์แบบโต้ตอบได้

    • แนะนำให้ลองทดลอง Grid area ในเครื่องมือ
    • ใช้ Grid Layoutit มาหลายปีแล้ว และทำให้การปรับช่องว่างง่ายขึ้นมาก

  • เหมือนจะเข้าใจ CSS Grid เป็นครั้งแรก

    • การใส่หมายเลขช่วยได้มาก
    • เป็นบทความยอดเยี่ยมที่คงจะกลับมาอ้างอิงบ่อยๆ