Licz linie siatki zamiast zajętych komórek
Odczytaj cel nawadniania poziomu, a następnie zidentyfikuj linie ograniczające zamierzony obszar. Rozmieszczenie siatki jest opisane za pomocą granic i torów; numer linii to nie tylko numer kolorowej komórki. Przed wprowadzeniem CSS wskaż żądaną granicę początkową i końcową. To małe rozróżnienie ułatwia przewidzenie obszaru, który obejmie reguła, zamiast odkrywania go dopiero po poruszeniu się wody.
Kiedy zadanie wykorzystuje rozpiętość, zastanów się, ile ścieżek powinien obejmować obszar. Nie przekładaj tego bezpośrednio na odległość w pikselach ani nie używaj ponownie reguły wyrównywania Flexbox tylko dlatego, że obie gry obejmują CSS. Wprowadź jedną zmianę w edytorze, obserwuj nawodniony obszar i porównaj go z marchewką lub innymi celami określonymi przez poziom. Bieżące zadanie decyduje, co liczy się jako sukces; wizualnie szeroki obszar nie jest automatycznie zamierzonym rozwiązaniem.
Użyj kształtu wyniku do zdiagnozowania reguły
Jeżeli nawadniany obszar zaczyna się w niewłaściwym miejscu, sprawdź wybraną granicę początkową. Jeśli zaczyna się prawidłowo, ale kończy się za wcześnie lub za późno, sprawdź koniec lub rozpiętość. Jeśli zmienia się w złym kierunku, sprawdź, której właściwości wiersza lub kolumny użyłeś. Nazwanie błędu geometrycznego umożliwia precyzyjną następną edycję i pomaga uniknąć jednoczesnego zastępowania kilku poprawnych części reguły.
Po udanej próbie wyjaśnij, które linie obejmowały cel i w jaki sposób reguła je wybrała. To wyjaśnienie jest lepsze niż rozłączony ciąg odpowiedzi, ponieważ późniejsze poziomy mogą wykorzystywać inną siatkę lub łączyć ograniczenia. To centrum obsługuje rzeczywisty interaktywny ogród CSS i instrukcje na jego poziomie. Nie obiecuje samouczka dotyczącego układu opartego na pikselach, zewnętrznego certyfikatu ani pełnego arkusza odpowiedzi testowanego z każdą wersją. Użyj strony odtwarzania, aby uzyskać dostęp do elementów sterujących edytora, a następnie wróć tutaj, jeśli chcesz w bardziej konkretny sposób sprawdzić błąd w pozycjonowaniu.
Na przykład, jeśli woda zaleje o jeden tor za dużo, zaznacz żądaną granicę końcową i porównaj ją z wprowadzoną wartością lub rozpiętością. Zachowaj prawidłowy początek bez zmian podczas sprawdzania końca. Jeśli wynik zostanie przeniesiony do innego wiersza, sprawdź regułę wiersza oddzielnie od reguły kolumny. Gdy cel zostanie prawidłowo zakryty, opisz słownie granice i tory. Ćwiczenie polega na połączeniu umiejscowienia CSS z widoczną siatką, co jest przydatne w nowej aranżacji, w której poprzedni ciąg odpowiedzi nie zaznacza już zamierzonego obszaru.
Wskazówki i strategia dotyczące Grid Garden
Zaznacz wskazówkę do przećwiczenia w następnej rundzie. Ta lista nie zmienia gry ani nie zapisuje postępów.
Pytania i odpowiedzi dotyczące Grid Garden
Jakiego tematu uczy Grid Garden?
Umożliwia interaktywne ćwiczenie z siatką CSS poprzez układanie puzzli w formie układu ogrodu.
Czy steruję postacią w ruchu?
Nie. Główna interakcja polega na wprowadzeniu CSS, co zmienia rozmieszczenie siatki.
Jakie jest oryginalne źródło?
Gra Grid Garden autorstwa Thomas Park dostarcza kod na licencji MIT oraz grafikę na licencji CC BY 3.0, wykorzystane w tej sprawdzonej wersji.
Czy początek na linii 2 i koniec na 4 obejmuje cztery komórki?
Nie. grid-column-start: 2 i grid-column-end: 4 wybierają przestrzeń między liniami 2 i 4: dwie ścieżki kolumn. Linia końcowa jest granicą, a nie dodatkową podlewaną komórką. Policz odstępy albo użyj span 2 i sprawdź zaznaczenie przed zmianą wiersza.