การแสดงผลกริดในตัวดีบักเบราว์เซอร์
เมื่อทำงานกับกริดในกระบวนการออกแบบเว็บไซต์ บางครั้งจำเป็นต้องตรวจสอบว่าการจัดวางองค์ประกอบในกริดเป็นไปอย่างถูกต้องหรือไม่ นอกจากนี้ หากเราทำผิดพลาด เราควรจะต้องสามารถวิเคราะห์ได้ว่าองค์ประกอบใดที่ทำให้เกิดการจัดวางที่ไม่ถูกต้อง เพื่อวัตถุประสงค์นี้เราสามารถใช้ตัวดีบักในเบราว์เซอร์ได้
เรามาดูกริดโดยใช้ตัวอย่างตัวดีบักในเบราว์เซอร์ Chrome เริ่มต้นด้วยการเลือกวัตถุที่เราสนใจซึ่งเป็นกริด แล้วคลิกขวาเพื่อเลือกตัวเลือก 'Inspect' จากรายการ:
ตอนนี้ในแผงด้านขวาของเบราว์เซอร์ที่เปิดขึ้นมา ให้เลื่อนเคอร์เซอร์ไปยังวัตถุกริดของเราและสังเกตว่าในแถวถัดจากองค์ประกอบหลักจะมีปุ่ม grid:
หลังจากที่เรากดปุ่ม grid แล้ว เราจะเห็นว่าวัตถุของเราแสดงในระบบกริดที่เข้าใจได้อย่างเป็นรูปธรรม พร้อมด้วยหมายเลขคอลัมน์และแถวทั้งหมด:
ตอนนี้ขอให้สังเกตแผงในตัวดีบัก มีแท็บ Styles, Computed, Layout และอื่นๆ ให้เปลี่ยนจากแท็บ Styles ซึ่งเปิดใช้งานโดยค่าเริ่มต้น ไปที่แท็บ Layout คุณจะเห็นรายการการตั้งค่ากริดของคุณ:
ลองเลือกตัวเลือกแรก Show track sizes เพื่อแสดงขนาดของแทร็ก:
โดยใช้ตัวเลือก Show area names คุณสามารถแสดงชื่อพื้นที่ของกริดได้ หากมีการกำหนดไว้ และเมื่อเลือกตัวเลือก Extend grid lines เราจะเห็นเส้นแทร็กที่ขยายออกไปนอกขอบเขตของกริด:
