Считайте линии сетки, а не занятые ячейки
Прочтите цель полива уровня, затем определите линии, ограничивающие намеченную область. Размещение сетки описывается границами и дорожками; номер строки — это не просто номер цветной ячейки. Прежде чем ввести CSS, укажите желаемую начальную и конечную границы. Это небольшое различие позволяет легче предсказать область, которую будет охватывать правило, вместо того, чтобы обнаруживать ее только после того, как вода пойдет.
Когда в задаче используется пролет, подумайте, сколько дорожек должна покрывать эта область. Не переводите это напрямую в расстояние в пикселях и не используйте повторно правило выравнивания flexbox только потому, что в обеих играх используется 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 и проверьте выделение перед изменением строки.
Управление и полные инструкции
Управление и полные инструкции
Играть в Grid Garden