Підраховує лінії сітки, а не зайняті клітинки
Прочитайте ціль поливу рівня, а потім визначте лінії, які обмежують заплановану область. Розміщення сітки описується межами та доріжками; номер рядка - це не просто номер кольорової клітинки. Перш ніж ввести CSS, наведіть вказівник на початкову та кінцеву межі, які ви хочете. Ця невелика різниця полегшує прогнозування області, яку охопить правило, а не відкриває її лише після того, як вода рухнеться.
Коли завдання використовує діапазон, подумайте про те, скільки доріжок має охоплювати область. Не перекладайте це безпосередньо на відстань у пікселях і не використовуйте повторно правило вирівнювання flexbox лише тому, що обидві ігри містять CSS. Введіть одну зміну в редакторі, спостерігайте за политою ділянкою та порівняйте її з морквою чи іншими цілями, визначеними рівнем. Поточне завдання вирішує, що вважається успіхом; візуально широка область не є автоматично передбачуваним рішенням.
Використовуйте форму результату для діагностики правила
Якщо поливна область починається не в тому місці, перевірте вибрану початкову межу. Якщо він починається правильно, але закінчується занадто рано або занадто пізно, перевірте кінець або проліт. Якщо він змінюється в неправильному напрямку, перевірте, яку властивість рядка чи стовпця ви використали. Назва геометричної помилки дає вам точне наступне редагування та допомагає уникнути заміни кількох правильних частин правила одночасно.
Після успішної спроби поясніть, які лінії охоплювали ціль і як правило їх вибрало. Таке пояснення краще переноситься вперед, ніж роз’єднаний рядок відповіді, оскільки на пізніших рівнях може використовуватися інша сітка або об’єднуватися обмеження. Цей центр підтримує фактичний інтерактивний сад CSS та його інструкції щодо рівня. Він не обіцяє підручника з макета на основі пікселів, зовнішньої сертифікації чи повного аркуша відповідей, перевіреного за кожною версією. Використовуйте сторінку відтворення для елементів керування редактором, а потім поверніться сюди, коли захочете зосереджено переглянути помилку позиціонування.
Наприклад, якщо вода покриває одну доріжку забагато, позначте бажану кінцеву межу та порівняйте її з введеним значенням або діапазоном. Зберігайте правильний початок без змін, переглядаючи кінець. Якщо результат переходить до іншого рядка, перевірте правило рядка окремо від правила стовпця. Коли ціль пройдено правильно, опишіть межі та сліди словами. Вправа полягає в тому, щоб з’єднати розташування CSS із видимою сіткою, що корисно в новому розташуванні, де попередній рядок відповіді більше не вибирає призначену область.
Поради та стратегія Grid Garden
Позначте пораду для наступної спроби. Цей список не змінює гру й не зберігає ігровий прогрес.
Запитання та відповіді до Grid Garden
Яку тему викладає Grid Garden?
Він забезпечує інтерактивну практику з сіткою CSS за допомогою головоломок з плануванням саду.
Чи керую я рухомим персонажем?
Ні. Основна взаємодія — це введення CSS, яке змінює розташування сітки.
Яке першоджерело?
У цьому рецензованому виданні використано джерело Thomas Park Grid Garden, ліцензоване MIT, та ілюстрації CC BY 3.0.
Початкова лінія 2 і кінцева 4 охоплюють чотири клітинки?
Ні. grid-column-start: 2 і grid-column-end: 4 вибирають простір між лініями 2 та 4 — дві смуги стовпців. Кінцева лінія є межею, а не додатковою политою клітинкою. Рахуйте проміжки або використовуйте span 2 та перевірте виділення перед зміною рядка.