Aprenda layout de grade CSS (The Fun Way) com Grid Garden

A maioria dos desenvolvedores da web conhece o jogo Flexbox Froggy que ensina os fundamentos do flexbox do princípio. Este jogo gratuito foi viral e ainda é incrivelmente valioso para ensinar as pessoas a codificar com flexbox.

Bem, o mesmo desenvolvedor que fez esse jogo tem um novo jogo chamado Jardim da grade.

Este jogo funciona de maneira semelhante, mas ensina como codificar grades CSS. É um recurso relativamente novo, mas é pegando rápido e Grid Garden é facilmente a melhor maneira de aprender.

Tudo no Grid Garden segue uma estilo de ensino semelhante como Flexbox Froggy. Foi criado pelo mesmo desenvolvedor, Thomas Park, então você pode esperar um nível semelhante de dificuldade e usabilidade.

Por padrão, você começa no nível um com um total de 28 níveis do início ao fim. Você pode sempre pular níveis se você acha que algum é muito difícil, mas eu acho que é sempre bom trabalhar com todos eles, apenas como uma atualização.

Se você não tem ideia de como funcionam as propriedades relacionadas à grade, você se encontrará pesquisando várias palavras no Google. O layout da grade CSS é um módulo totalmente novo com sua própria sintaxe e recursos.

Eu recomendo brincar com Grid Garden sempre que tiver a chance. É praticamente um Playground do desenvolvedor CSS para aprender e estudar todas as várias propriedades de layout de grade.

Eu não posso dizer que este jogo fará de você um expert em grades CSS. Somente construir projetos e praticar muito pode levá-lo a um nível de especialista. Mas, Grid Garden é uma maneira divertida de começar sem todo o estresse usual para aprender algo novo.

Todo o projeto é totalmente gratuito e de código aberto no GitHub se você quiser baixá-lo localmente para estudar ou expandir. Você também pode compartilhar suas ideias com o criador no Twitter @thomashpark.