Gerador de CSS grid e flexbox

O que faz

Dois construtores para os dois sistemas de layout do CSS, com prévia desenhada pelo seu navegador e três saídas: CSS, o HTML correspondente e as mesmas regras como classes do Tailwind CSS v4.

No Grid você define colunas e linhas com fr, px, %, auto, min-content, max-content ou minmax(px, fr); trilhas iguais viram repeat(); ajusta espaçamentos e alinhamento, ativa o modo repeat(auto-fit, minmax(…, 1fr)) e pinta áreas nomeadas clicando ou arrastando sobre as células. No Flexbox escolhe direção, quebra de linha, justify-content, align-items, align-content, espaçamento e, por item, flex-grow, flex-shrink, flex-basis, order e align-self.

Detalhes importantes

Cada área nomeada precisa ser um único retângulo preenchido: um formato em L invalida todo o grid-template-areas, e a ferramenta detecta isso antes que você copie o código. fr divide o espaço que sobra depois das trilhas fixas e dos espaçamentos. flex: 1 equivale a grow 1, shrink 1 e basis 0%, então os itens ficam iguais. order muda só a ordem visual, não a do teclado nem a dos leitores de tela.