1. บทนำ
ตอนนี้เครื่องมือสําหรับนักพัฒนาเว็บมีการรองรับการแก้ไขข้อบกพร่องตารางกริด CSS ได้ดีขึ้นแล้ว
เมื่อองค์ประกอบ HTML ในหน้าเว็บมีการใช้ display: grid หรือ display: inline-grid กับเอลิเมนต์นั้น แผงองค์ประกอบจะมีตัวเลือกมากมายที่จะช่วยให้คุณตรวจสอบตารางกริดได้ดียิ่งขึ้น
สิ่งที่จะเรียนรู้
Codelab นี้จะสอนวิธีแก้ไขข้อบกพร่องของตารางกริด CSS ด้วยเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome
- วิธีสลับฟีเจอร์การแก้ไขข้อบกพร่องของตารางกริดจากแผงองค์ประกอบ
- วิธีปรับแต่งการตั้งค่าการวางซ้อนตารางกริดในแผงเลย์เอาต์
- วิธีแก้ไขรูปแบบด้วยการวางซ้อนตารางกริด
สิ่งที่จะต้องการ
- คอมพิวเตอร์ที่ใช้งานได้และ Wi-Fi สมจริง
- Chrome เวอร์ชัน 87 ขึ้นไป
- [ไม่บังคับ] ความเข้าใจเบื้องต้นเกี่ยวกับตารางกริด CSS
สิ่งที่จะทําได้
คุณจะไขปริศนานี้ด้วยความช่วยเหลือจากเครื่องมือแก้ไขข้อบกพร่องในการขุด CSS ตารางกริด
2. เริ่ม
คลิกลิงก์ต่อไปนี้เพื่อเปิดหน้าปริศนา
จากนั้นในหน้าปริศนา ให้เปิดเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome
3. เปิดใช้การวางซ้อนตารางกริด
ตรวจสอบปริศนาในแผงองค์ประกอบ คลิกและโฟกัสที่โหนดของคอนเทนเนอร์ปริศนา
<div class="chrome-puzzle">
ในแผงองค์ประกอบ ให้สังเกตว่ามีป้าย grid ถัดจากคอนเทนเนอร์ปริศนา คลิกเพื่อสลับการวางซ้อนตารางกริด
วิดีโอนี้จะสาธิตวิธีทําตามขั้นตอนข้างต้น
4. ปรับแต่งการแสดงผลการวางซ้อนตารางกริด
ในขณะนี้ การวางซ้อนตารางกริดจะแสดงหมายเลขบรรทัด มาปรับแต่งการแสดงเพิ่มเติมเพื่อช่วยเราไขปริศนากัน
คลิกแผงเลย์เอาต์ เลือกซ่อนป้ายกํากับบรรทัดในเมนูแบบเลื่อนลงเพื่อซ่อนหมายเลขบรรทัดในตารางกริด
จากนั้นไปที่แผงรูปแบบ ตรวจสอบ CSS ของคอนเทนเนอร์ปริศนา ซึ่งประกอบด้วยพร็อพเพอร์ตี้ grid-template-areas:
.chrome-puzzle {
grid-template-areas:
"top-left top-right"
"bottom-left bottom-right";
}
ชื่อพื้นที่มีประโยชน์ในการแก้ปริศนา มาอัปเดตการตั้งค่าเพื่อแสดงบนหน้าจอกัน
กลับไปที่แผงเลย์เอาต์ เปิดใช้ช่องทําเครื่องหมายแสดงชื่อพื้นที่
นี่แหละ! ตอนนี้ การวางซ้อนตารางกริดจะแสดงชื่อพื้นที่ของปริศนาแต่ละชิ้น
วิดีโอนี้จะสาธิตวิธีทําตามขั้นตอนข้างต้น
5. ไขปัญหา
ด้วยชื่อพื้นที่ที่แสดงบนหน้าจอ เราจึงสามารถเริ่มไขปัญหาได้
มาวางจิ๊กซอว์แต่ละชิ้นลงในพื้นที่ที่ถูกต้องกัน
เราจะเริ่มโดยตรวจสอบชิ้นส่วนปริศนาชิ้นแรก
<img src="...-grid-4.png" class="piece-4">
ในแผงรูปแบบ ให้ค้นหาคลาส CSS ของชิ้นส่วนต่อไปนี้
.piece-4 {
grid-area: auto;
}
ขณะนี้ตั้งค่า grid-area เป็น auto อัปเดตชื่อพื้นที่ให้ถูกต้องได้เลยนะ
ชิ้นส่วนนี้ควรอยู่ในพื้นที่ใด สมมติว่าพื้นที่ที่ถูกต้องของส่วนนี้คือ top-right จากนั้นแทนที่ค่า auto ด้วย top-right ได้ แสดงภาพการเปลี่ยนแปลงได้ทันที ชิ้นนี้วางอยู่ในพื้นที่ top-right
วิดีโอนี้จะสาธิตวิธีทําตามขั้นตอนข้างต้น
อัปเดต grid-area ของแต่ละชิ้นจนกว่าจะไขปริศนาได้
6. ยินดีด้วย
ยินดีด้วย คุณป้อนรหัส Codelab นี้เรียบร้อยแล้ว
ดูเอกสารเพิ่มเติมเกี่ยวกับเครื่องมือแก้ไขข้อบกพร่องของ CSS CSS ตารางกริด