CSS Grid Generator - gerador de CSS Grid com arrastar e soltar

• Ferramenta que ajuda a criar layouts de CSS Grid personalizados com mais facilidade
  • Permite definir com praticidade o tamanho das colunas, linhas e espaçamentos usando o mouse
• Como usar
  • Defina colunas, linhas e espaçamentos de acordo com a sua necessidade
  • Clique no retângulo com o símbolo + para adicionar um novo elemento à grade
  • Use a alça no canto inferior direito para redimensionar a DIV
  • Arraste e solte para reposicionar a DIV no local desejado
  • Por fim, copie o código HTML e CSS gerado e cole no seu projeto
• O autor criou o Tailwind Grid Generator, recebeu feedback positivo e, com base nisso, desenvolveu uma ferramenta para CSS puro

[GN⁺]

Comentários do Hacker News

• Após adicionar algumas caixas e movê-las para que se sobreponham, ocorre um problema em que elas saem dos limites da grade
• Criou um Tailwind Grid Generator e recebeu feedback positivo, e com base nisso desenvolveu uma ferramenta para CSS puro
• O rearranjo dinâmico é um problema mais difícil do que a configuração da grade
  • Consultou o MDN para descobrir como fazer a grade reduzir ou aumentar colunas
  • Um utilitário simples é útil para simplificar tarefas repetitivas
  • Parece que seria útil salvar o estado da configuração da grade na URL
• O gerador é útil como ferramenta de aprendizado, e ao entender a sintaxe e os recursos é possível usá-lo com mais flexibilidade
  • O Chrome DevTools também é útil para editar a grade e ver as mudanças imediatamente
  • Escreveu uma publicação sobre grid
• Como programador das antigas, está acostumado a criar grades usando tabelas, mas layouts em CSS são difíceis
  • Ferramentas assim ajudam muito
• Há alguns anos encontrou um gerador de site semelhante, mas ele não tinha recurso de arrastar e soltar
  • Aprendeu os conceitos básicos de CSS Grid, como grid-template-columns, gap etc.
  • Espera que o bom trabalho continue
• Quando grid surgiu pela primeira vez, pensou que mudaria fundamentalmente os layouts web com base em áreas de template
  • Não conseguiu criar um framework interno e acabou usando flex
  • Então o Tailwind apareceu e passou a atender a tudo o que era necessário para escrever frontends responsivos rapidamente
  • Pergunta se alguém conhece um bom framework ou exemplos que usem áreas de template
  • Vai usar esta ferramenta da próxima vez que trabalhar com grid
• Encontrou dois bugs
  • Ao redimensionar a janela do navegador, a largura não responde
  • Como a caixa é mais baixa que o contêiner, a nova linha fica posicionada mais acima na grade
• Não é desenvolvedor web, mas acha que pode haver casos em que sejam necessárias mais de 12 colunas
  • Ao inserir um número maior, as colunas são interpretadas de forma estranha
• A UX é muito boa
  • Não cria layouts de página com frequência, então não aprendeu a fundo a sintaxe de grid, mas vai deixar esta ferramenta nos favoritos