คู่มือนี้จะแสดงวิธีค้นหาตารางกริด CSS ในหน้าเว็บ ตรวจสอบตารางกริด และแก้ไขข้อบกพร่องของปัญหาเลย์เอาต์ในแผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome
ตัวอย่างที่แสดงในภาพหน้าจอที่ปรากฏในบทความนี้มาจากหน้าเว็บ 2 หน้า ได้แก่ Fruit 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 บรรทัดที่มีชื่อดังนี้: ซ้าย กลาง 1 กลาง 2 และขวา
ในการสาธิตนี้ องค์ประกอบสีส้มที่ครอบคลุมช่วงจากซ้ายไปขวาด้วย 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 ทันที เลื่อนไปที่องค์ประกอบนั้นในหน้าเว็บแล้วเลือกในแผงองค์ประกอบ
