นับเส้นตารางมากกว่าเซลล์ที่ถูกครอบครอง
อ่านเป้าหมายการรดน้ำของระดับแล้วระบุเส้นที่ผูกบริเวณที่ต้องการ การวางตำแหน่งกริดอธิบายด้วยขอบเขตและแทร็ก หมายเลขบรรทัดไม่ใช่แค่จำนวนเซลล์ที่มีสีเท่านั้น ก่อนเข้าสู่ CSS ให้ชี้ไปที่ขอบเขตเริ่มต้นและสิ้นสุดที่คุณต้องการ ความแตกต่างเล็กๆ น้อยๆ นี้ทำให้ง่ายต่อการคาดเดาพื้นที่ที่กฎจะครอบคลุม แทนที่จะค้นพบหลังจากที่น้ำเคลื่อนตัวเท่านั้น
เมื่องานใช้ช่วง ลองพิจารณาว่าพื้นที่ควรครอบคลุมกี่แทร็ก อย่าแปลสิ่งนั้นเป็นระยะทางพิกเซลโดยตรง หรือใช้กฎการจัดตำแหน่งเฟล็กบ็อกซ์ซ้ำเพียงเพราะว่าทั้งสองเกมเกี่ยวข้องกับ CSS ป้อนการเปลี่ยนแปลงหนึ่งในเครื่องมือแก้ไข สังเกตพื้นที่รดน้ำและเปรียบเทียบกับแครอทหรือเป้าหมายอื่นๆ ที่ระบุตามระดับ งานปัจจุบันจะตัดสินว่าอะไรจะถือเป็นความสำเร็จ พื้นที่ที่มองเห็นได้กว้างไม่ใช่วิธีแก้ปัญหาที่ตั้งใจไว้โดยอัตโนมัติ
ใช้รูปร่างของผลลัพธ์เพื่อวิเคราะห์กฎ
หากพื้นที่รดน้ำเริ่มต้นผิดให้ตรวจสอบขอบเขตเริ่มต้นที่เลือก หากเริ่มต้นอย่างถูกต้องแต่สิ้นสุดเร็วเกินไปหรือสายเกินไป ให้ตรวจสอบจุดสิ้นสุดหรือช่วง หากมีการเปลี่ยนแปลงไปในทิศทางที่ไม่ถูกต้อง ให้ตรวจสอบว่าคุณใช้คุณสมบัติแถวหรือคอลัมน์ใด การตั้งชื่อข้อผิดพลาดทางเรขาคณิตช่วยให้คุณแก้ไขครั้งต่อไปได้อย่างแม่นยำ และช่วยหลีกเลี่ยงการแทนที่ส่วนที่ถูกต้องหลายส่วนของกฎในคราวเดียว
หลังจากพยายามสำเร็จ ให้อธิบายว่าบรรทัดใดล้อมรอบเป้าหมาย และกฎเลือกอย่างไร คำอธิบายนั้นดำเนินการได้ดีกว่าสตริงคำตอบที่ถูกตัดการเชื่อมต่อ เนื่องจากระดับต่อมาสามารถใช้กริดอื่นหรือรวมข้อจำกัดได้ ศูนย์นี้รองรับสวนแบบโต้ตอบ CSS จริงและคำแนะนำระดับของสวน ไม่รับประกันบทเรียนการจัดวางแบบพิกเซล การรับรองจากภายนอก หรือกระดาษคำตอบฉบับสมบูรณ์ที่ทดสอบกับทุกเวอร์ชัน ใช้หน้าเล่นสำหรับส่วนควบคุมของตัวแก้ไข จากนั้นกลับมาที่นี่เมื่อคุณต้องการวิธีการเน้นในการตรวจสอบข้อผิดพลาดในการวางตำแหน่ง
เช่น หากน้ำครอบคลุมแทร็กเดียวมากเกินไป ให้ทำเครื่องหมายขอบเขตสิ้นสุดที่ต้องการแล้วเปรียบเทียบกับค่าหรือช่วงที่คุณป้อน คงการเริ่มต้นที่ถูกต้องไว้ไม่เปลี่ยนแปลงในขณะที่แก้ไขจุดสิ้นสุด หากผลลัพธ์ย้ายไปยังแถวอื่น ให้ตรวจสอบกฎแถวแยกจากกฎคอลัมน์ เมื่อครอบคลุมเป้าหมายอย่างถูกต้องแล้ว ให้อธิบายขอบเขตและติดตามเป็นคำพูด แบบฝึกหัดคือการเชื่อมต่อตำแหน่ง CSS กับตารางที่มองเห็นได้ ซึ่งมีประโยชน์ในการจัดเรียงใหม่โดยที่สตริงคำตอบก่อนหน้าไม่ได้เลือกพื้นที่ที่ต้องการอีกต่อไป
เคล็ดลับและกลยุทธ์สำหรับ Grid Garden
เลือกเคล็ดลับที่อยากฝึกในรอบถัดไป รายการนี้ไม่เปลี่ยนแปลงเกมหรือบันทึกความคืบหน้าในการเล่น
คำถามและคำตอบเกี่ยวกับ Grid Garden
Grid Garden สอนเรื่องอะไร?
แอปนี้ช่วยให้ฝึกฝนการใช้งานตาราง CSS แบบโต้ตอบได้ผ่านปริศนาการจัดสวน
ฉันควบคุมตัวละครที่กำลังเคลื่อนที่อยู่หรือไม่?
ไม่ครับ การโต้ตอบหลักคือการป้อน CSS ซึ่งจะเปลี่ยนตำแหน่งในตารางกริด
แหล่งที่มาดั้งเดิมคืออะไร?
Thomas Park's Grid Garden เป็นผู้จัดหาซอร์สโค้ดที่ได้รับอนุญาตภายใต้ MIT และ CC BY 3.0 เป็นผู้จัดหาภาพประกอบที่ใช้ในฉบับที่นำมาตรวจสอบนี้
เส้นเริ่ม 2 และเส้นจบ 4 ครอบคลุมสี่ช่องไหม?
ไม่ grid-column-start: 2 และ grid-column-end: 4 เลือกพื้นที่ระหว่างเส้น 2 กับ 4 ซึ่งเป็นสองแนวคอลัมน์ เส้นจบเป็นขอบ ไม่ใช่ช่องรดน้ำเพิ่ม ให้นับช่วงระหว่างเส้นหรือใช้ span 2 แล้วตรวจพื้นที่เน้นก่อนปรับตำแหน่งแถวด้วย