Aprenda como as propriedades da grade CSS funcionam com o Griddy.io

Se você continuar com a tecnologia de web design, então você deve saber sobre grades CSS. Essas propriedades são novas adições ao formato CSS3 e eles estão rapidamente se tornando o melhor amigo de um desenvolvedor.

Recentemente, abordamos um jogo divertido para ajudar você a aprender as propriedades da grade CSS, mas os jogos nem sempre ensinam ideias práticas. É aí que Griddy pode ser mais útil.

Esta aplicação web gratuita permite personalizar grades em tempo real e atualiza snippets ao vivo na página. Você pode mexer com sua própria grade personalizada definindo colunas, medianizes e margens e reestruturar a página para saber como as propriedades da grade funcionam.

Griddy é na verdade um ferramenta de aprendizado gratuito feita para desenvolvedores frontend quem quer entender mais sobre grades CSS.

Com este webapp, você pode adicionar novos itens à grade, remover outros itens e redimensioná-los para caber em qualquer layout desejado.

O webapp possui diferentes seções com diferentes campos de entrada para editar as propriedades da grade. Estes permitem reformatar as linhas / colunas da grelha e ensinam-lhe exatamente o que você está fazendo pelo caminho.

Você pode definir lacunas de coluna, alinhar itens de grade e jogar com configurações de justificação - através de todos esses campos de formulário. Sempre que você fizer uma alteração, ele atualizará automaticamente a visualização e o pequeno snippet de código abaixo.

Dessa forma, você pode simplesmente copiar e colar o CSS em sua própria folha de estilo, se quiser mexer com isso ainda mais. Muito legal!

Griddy pode não ser tão divertido quanto Grid Garden, mas Griddy é uma maneira prática de aprender visualmente entender como as propriedades da grade CSS afetam os elementos da página.

Para brincar com isso basta visitar a homepage Griddy. Você também pode compartilhar seus pensamentos ou perguntas com o criador no Twitter @drewisthe.