Изучите CSS Grid Layout (Веселый путь) с Grid Garden

Большинство веб-разработчиков знают игру Flexbox Froggy, которая обучает основам flexbox с нуля. Эта бесплатная игра стала вирусной и по-прежнему невероятно полезна для обучения людей программированию с помощью flexbox.

Ну, тот же разработчик, который сделал эту игру есть новая игра называется Сетка Садовая.

Эта игра работает аналогичным образом, но учит вас как кодировать CSS-сетки. Это относительно новая функция, но это быстро поймать и Grid Garden - лучший способ научиться.

Все в Grid Garden следует похожий стиль обучения как Flexbox Froggy. Он был создан тем же разработчиком, Томасом Парком, поэтому вы можете ожидать аналогичного уровня сложности и удобства использования..

По умолчанию вы начинаете с первого уровня с всего 28 уровней от начала до конца. Вы всегда можете пропустить уровни если вы думаете, что это слишком сложно, но я считаю, что всегда хорошо работать с ними, просто как освежитель.

Если вы не знаете, как работают свойства, связанные с сеткой, вы обнаружите, что гуглите много слов. CSS сетка является совершенно новый модуль со своим собственным синтаксисом и функциями.

Я настоятельно рекомендую играть с Grid Garden всякий раз, когда у вас есть такая возможность. Это практически Площадка для разработчиков CSS для изучения и изучения всех различных свойств макета сетки.

Я не могу сказать, что эта игра сделает вас экспертом в сетках CSS. Только строительные проекты и много практики могут привести вас к уровню эксперта. Но Grid Garden - это интересный способ начать работу без всего обычного стресса, который уходит на изучение чего-то нового..

Весь проект полностью бесплатный и с открытым исходным кодом на GitHub, если вы хотите скачать его локально для изучения или расширения. Вы также можете поделиться своими мыслями с создателем в Twitter @thomashpark.