CSS Grid em perspectiva : uma abordagem didática.

Abstract

O ensino de layout no desenvolvimento Web, especialmente no que se refere ao uso do Cascading Style Sheets (CSS) Grid, apresenta desafios relacionados à abstração espacial e à compreensão da relação entre código e comportamento visual. Este trabalho tem como objetivo o desenvolvimento de uma aplicação Web interativa que auxilie no ensino dos conceitos fundamentais do CSS Grid por meio da experimentação prática. Na plataforma desenvolvida, busca-se estruturar um ambiente que permita a edição de código com retorno visual imediato, organizar o processo de aprendizagem em fases progressivas divididas entre propriedades dos Grid Items e propriedades do Grid Container, e integrar edição de estilos, gerenciamento de estado da aplicação e renderização do layout em um fluxo coerente. O resultado deste trabalho foi o desenvolvimento da primeira versão funcional de uma aplicação denominada Tezza Space, implementada com React e TypeScript, utilizando uma arquitetura baseada em componentes reutilizáveis e gerenciamento centralizado de estado. O sistema organiza o processo de aprendizagem em vinte fases, distribuídas em dois módulos didáticos, nas quais o usuário edita propriedades de layout e acompanha, em tempo real, sua aplicação em um tabuleiro orbital estruturado com CSS Grid. A correção dos mecanismos implementados foi verificada por meio de um conjunto de 151 testes automatizados, que alcançaram uma cobertura geral de 97,8%. A análise do desenvolvimento indica que a aplicação sustenta um fluxo completo e consistente entre a edição de regras, a conversão em estilos computáveis e a renderização visual, contemplando tanto as propriedades estruturantes do Grid Container quanto as propriedades de posicionamento e alinhamento dos Grid Items. Por fim, o Tezza Space estabelece uma base técnica e pedagógica consistente para o ensino interativo do CSS Grid, apresentando relevância no contexto acadêmico ao propor uma abordagem prática e visual para o aprendizado de layouts, além de apontar como trabalhos futuros a validação empírica da proposta junto a usuários reais e a ampliação do conjunto de fases para contemplar desafios de articulação simultânea entre múltiplas propriedades.