เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ: วิธีตรวจสอบตารางกริดใน CSS

โซเฟีย เอเมเลียโนวา
Sofia Emelianova

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ช่วยให้การแก้ไขข้อบกพร่องเลย์เอาต์แบบตารางกริดใน CSS ใช้งานได้ง่ายด้วยตัวเลือกการแสดงภาพที่หลากหลาย

ดูวิดีโอเพื่อเรียนรู้วิธีสลับการวางซ้อนตารางกริดในแผงองค์ประกอบและใช้เพื่อทำสิ่งต่อไปนี้

ตารางกริดซ้อนทับ

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

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

เครื่องมือแก้ไขตารางกริด

ดูบทแนะนำตรวจสอบ CSS Grid เพื่อรับประสบการณ์การเรียนรู้แบบลงมือทำจริงๆ