คู่มือนี้แสดงวิธีค้นหาตารางกริด CSS ในหน้า ตรวจสอบตาราง และแก้ไขข้อบกพร่องของปัญหาเลย์เอาต์ในแผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ตัวอย่างที่แสดงในภาพหน้าจอที่ปรากฏในบทความนี้มาจากหน้าเว็บ 2 หน้า ได้แก่ Fruitbox และ Snack Box
สำรวจตารางกริด CSS
เมื่อองค์ประกอบ HTML ในหน้าเว็บมีการใช้ display: grid หรือ display: inline-grid คุณจะเห็นป้าย grid ข้างองค์ประกอบนั้นในแผงองค์ประกอบ
คลิกป้ายเพื่อสลับการแสดงเส้นตารางซ้อนทับในหน้าเว็บ โฆษณาซ้อนทับจะปรากฏเหนือองค์ประกอบ โดยวางให้เหมือนตารางกริดเพื่อแสดงตำแหน่งของเส้นตารางกริดและแทร็ก
เปิดแผงเลย์เอาต์ เมื่อรวมตารางกริดไว้ในหน้า แผงเลย์เอาต์จะมีส่วนตารางกริดที่มีตัวเลือกมากมายในการดูตารางกริดเหล่านั้น
จัดแนวรายการในตารางกริดและเนื้อหาด้วยเครื่องมือแก้ไขตารางกริด
คุณจัดรายการในตารางกริดและเนื้อหาให้สอดคล้องกันได้ด้วยการคลิกปุ่มแทนการพิมพ์กฎ CSS
วิธีจัดเรียงรายการในตารางกริดและเนื้อหา
ในแผงองค์ประกอบ > รูปแบบ ให้คลิกปุ่มเครื่องมือแก้ไขตาราง
ข้าง display: grid
ในเครื่องมือแก้ไขตารางกริด ให้คลิกปุ่มที่เกี่ยวข้องเพื่อตั้งค่าคุณสมบัติ CSS
align-*และjustify-*สำหรับรายการในตารางและเนื้อหาในรายการ
สังเกตรายการในตารางกริดที่ปรับเปลี่ยนแล้วและเนื้อหาในวิวพอร์ต
ตัวเลือกการดูตารางกริด
ส่วนตารางกริดในแผงเลย์เอาต์มีส่วนย่อย 2 ส่วนดังนี้
- การตั้งค่าการแสดงผลการวางซ้อน
- การวางซ้อนตารางกริด
มาดูรายละเอียดเกี่ยวกับส่วนย่อยเหล่านี้กัน
การตั้งค่าการแสดงผลการวางซ้อน
การตั้งค่าการแสดงผลการวางซ้อนประกอบด้วย 2 ส่วนดังนี้
a. เมนูแบบเลื่อนลงที่มีตัวเลือกต่อไปนี้
- ซ่อนป้ายกำกับเส้น: ซ่อนป้ายกำกับบรรทัดสำหรับการวางซ้อนตารางกริดแต่ละรายการ
- แสดงหมายเลขบรรทัด: แสดงหมายเลขบรรทัดสำหรับการวางซ้อนตารางกริดแต่ละรายการ (เลือกโดยค่าเริ่มต้น)
- แสดงชื่อเส้น: แสดงชื่อเส้นสำหรับการวางซ้อนตารางกริดแต่ละรายการในรูปแบบตารางกริดที่มีชื่อเส้น
b. ช่องทำเครื่องหมายที่มีตัวเลือกอยู่ภายใน:
- แสดงขนาดแทร็ก: สลับเพื่อแสดงหรือซ่อนขนาดแทร็ก
- แสดงชื่อพื้นที่: สลับเพื่อแสดงหรือซ่อนชื่อพื้นที่ในกรณีที่เป็นตารางกริดที่มีพื้นที่ตารางกริดที่มีชื่อ
- ขยายเส้นตารางกริด: โดยค่าเริ่มต้น เส้นตารางกริดจะแสดงเฉพาะภายในองค์ประกอบที่มีการตั้งค่า
display: gridหรือdisplay: inline-gridไว้เท่านั้น เมื่อเปิดใช้ตัวเลือกนี้ เส้นตารางกริดจะขยายไปถึงขอบของวิวพอร์ตตามแกนแต่ละแกน
มาตรวจสอบการตั้งค่าเหล่านี้อย่างละเอียดกัน
แสดงหมายเลขบรรทัด
โดยค่าเริ่มต้น จำนวนเส้นบวกและเลขลบจะแสดงในการวางซ้อนแบบตารางกริด
ซ่อนป้ายกำกับเส้น
เลือกซ่อนป้ายกำกับบรรทัดเพื่อซ่อนหมายเลขบรรทัด
แสดงชื่อเส้น
คุณสามารถเลือกแสดงชื่อเส้นเพื่อดูชื่อเส้นแทนตัวเลขได้ ในตัวอย่างนี้ เรามีบรรทัด 4 บรรทัดที่มีชื่อคือ left, middle1, middle2 และ right
ในการสาธิตนี้ องค์ประกอบสีส้มจะครอบคลุมจากซ้ายไปขวาด้วย CSS grid-column: left / right
การแสดงชื่อเส้นช่วยให้มองเห็นตำแหน่งเริ่มต้นและสิ้นสุดขององค์ประกอบได้ง่ายขึ้น
แสดงขนาดแทร็ก
เปิดใช้ช่องทำเครื่องหมายแสดงขนาดแทร็กเพื่อดูขนาดแทร็กของตารางกริด
เครื่องมือสำหรับนักพัฒนาเว็บจะแสดง [authored size] - [computed size] ในป้ายกำกับบรรทัดแต่ละป้าย: ขนาดเขียนแล้ว: ขนาดที่กำหนดไว้ในสไตล์ชีต (ละเว้นหากไม่ได้ระบุ) ขนาดที่คำนวณ: ขนาดจริงบนหน้าจอ
ในการสาธิตนี้ ขนาดคอลัมน์ snack-box ได้รับการกำหนดไว้ใน CSS grid-template-columns:1fr 2fr;
ดังนั้น ป้ายกำกับบรรทัดของคอลัมน์จะแสดงทั้งขนาดที่เขียนขึ้นและที่คำนวณแล้ว ได้แก่ 1fr - 96.66px และ
2fr - 193.32px
ป้ายกำกับบรรทัดของแถวจะแสดงเฉพาะขนาดที่คำนวณแล้ว ได้แก่ 80px และ 80px เนื่องจากไม่มีการกำหนดขนาดแถวในสไตล์ชีต
แสดงชื่อพื้นที่
หากต้องการดูชื่อพื้นที่ ให้เลือกช่องทำเครื่องหมายแสดงชื่อพื้นที่ ในตัวอย่างนี้จะมี 3 พื้นที่ในตารางกริด ได้แก่ top, bottom1 และ bottom2
ขยายเส้นตารางกริด
เลือกช่องทำเครื่องหมายขยายเส้นตารางกริดเพื่อขยายเส้นตารางกริดไปยังขอบของวิวพอร์ตตามแกนแต่ละแกน
การวางซ้อนตารางกริด
ส่วนการวางซ้อนตารางกริดมีรายการตารางกริดที่แสดงในหน้า โดยแต่ละช่องจะมีช่องทำเครื่องหมาย พร้อมด้วยตัวเลือกต่างๆ
เปิดใช้มุมมองที่วางซ้อนของตารางกริดหลายตาราง
คุณสามารถเปิดใช้มุมมองซ้อนทับของตารางกริดต่างๆ ได้ ในตัวอย่างนี้ มีการเปิดใช้การวางซ้อนตารางกริด 2 รายการ ได้แก่
main และ div.snack-box โดยแต่ละรายการมีสีต่างกัน
ปรับแต่งสีการวางซ้อนของตารางกริด
คุณปรับแต่งสีการวางซ้อนของตารางกริดแต่ละสีได้โดยคลิกตัวเลือกสี
ไฮไลต์ตารางกริด
คลิกไอคอนไฮไลต์เพื่อไฮไลต์องค์ประกอบ HTML ทันที จากนั้นเลื่อนไปที่องค์ประกอบนั้นในหน้าและเลือกในแผงองค์ประกอบ
