Đếm các đường lưới thay vì các ô bị chiếm dụng
Đọc mục tiêu tưới nước của cấp độ, sau đó xác định các đường giới hạn khu vực dự định. Vị trí lưới được mô tả bằng ranh giới và đường đi; số dòng không chỉ đơn giản là số của ô màu. Trước khi nhập CSS, hãy trỏ tới ranh giới bắt đầu và kết thúc mà bạn muốn. Sự khác biệt nhỏ đó giúp dự đoán khu vực mà quy tắc sẽ bao trùm dễ dàng hơn thay vì chỉ phát hiện ra nó sau khi nước di chuyển.
Khi một tác vụ sử dụng một khoảng, hãy nghĩ xem khu vực đó sẽ bao gồm bao nhiêu rãnh. Không chuyển trực tiếp điều đó thành khoảng cách pixel hoặc sử dụng lại quy tắc căn chỉnh flexbox chỉ vì cả hai trò chơi đều liên quan đến CSS. Nhập một thay đổi vào trình chỉnh sửa, quan sát vùng tưới nước và so sánh nó với cà rốt hoặc các mục tiêu khác được chỉ định theo cấp độ. Nhiệm vụ hiện tại quyết định điều gì được coi là thành công; một khu vực trực quan rộng không tự động là giải pháp mong muốn.
Sử dụng hình dạng của kết quả để chẩn đoán quy tắc
Nếu vùng được tưới nước bắt đầu sai vị trí, hãy kiểm tra ranh giới bắt đầu đã chọn. Nếu nó bắt đầu đúng nhưng kết thúc quá sớm hoặc quá muộn, hãy kiểm tra phần cuối hoặc nhịp. Nếu nó thay đổi sai hướng, hãy kiểm tra thuộc tính hàng hoặc cột nào bạn đã sử dụng. Việc đặt tên cho lỗi hình học sẽ mang lại cho bạn lần chỉnh sửa tiếp theo chính xác và giúp tránh phải thay thế một số phần đúng của quy tắc cùng một lúc.
Sau khi thử thành công, hãy giải thích những dòng nào bao quanh mục tiêu và cách quy tắc chọn chúng. Lời giải thích đó được đưa ra tốt hơn so với chuỗi câu trả lời bị ngắt kết nối vì các cấp độ sau có thể sử dụng một lưới khác hoặc kết hợp các ràng buộc. Trung tâm này hỗ trợ khu vườn tương tác thực tế CSS và hướng dẫn cấp độ của nó. Nó không hứa hẹn sẽ có hướng dẫn bố cục dựa trên pixel, chứng nhận bên ngoài hoặc bảng câu trả lời hoàn chỉnh được kiểm tra trên mọi phiên bản. Sử dụng trang phát để kiểm soát trình chỉnh sửa, sau đó quay lại đây khi bạn muốn xem lại lỗi định vị một cách tập trung.
Ví dụ: nếu nước bao phủ quá nhiều một rãnh, hãy đánh dấu ranh giới kết thúc mong muốn và so sánh nó với giá trị hoặc khoảng bạn đã nhập. Giữ nguyên phần mở đầu đúng trong khi sửa lại phần cuối. Nếu kết quả di chuyển sang một hàng khác, hãy kiểm tra quy tắc hàng riêng biệt với quy tắc cột. Khi mục tiêu được bao phủ chính xác, hãy mô tả ranh giới và dấu vết bằng lời. Bài tập này là kết nối vị trí CSS với lưới hiển thị, điều này rất hữu ích trong cách sắp xếp mới trong đó chuỗi câu trả lời trước đó không còn chọn vùng dự định nữa.
Mẹo và chiến lược cho Grid Garden
Đánh dấu mẹo muốn luyện ở lượt tiếp theo. Danh sách này không thay đổi trò chơi hay lưu tiến độ chơi.
Câu hỏi và câu trả lời về Grid Garden
Grid Garden dạy về chủ đề gì?
Nó cung cấp bài tập tương tác với lưới CSS thông qua các câu đố bố trí sân vườn.
Tôi có đang điều khiển một nhân vật di chuyển không?
Không. Thao tác chính là nhập mã CSS để thay đổi vị trí lưới.
Nguồn gốc ban đầu là gì?
Thomas Park's Grid Garden cung cấp mã nguồn được cấp phép theo giấy phép MIT và hình ảnh minh họa CC BY 3.0 được sử dụng trong ấn bản được đánh giá này.
Đường bắt đầu 2 và kết thúc 4 có phủ bốn ô không?
Không. grid-column-start: 2 và grid-column-end: 4 chọn khoảng giữa đường 2 và 4, tức hai dải cột. Đường cuối là ranh giới, không thêm một ô được tưới. Đếm khoảng hoặc dùng span 2 rồi kiểm tra vùng tô sáng trước khi chỉnh cả hàng.
Điều khiển và hướng dẫn đầy đủ
Điều khiển và hướng dẫn đầy đủ
Chơi Grid Garden