Gerador de CSS Grid
Crie layouts de grade CSS visualmente.
Predefinições de layout (10)
Arraste pelas células para pintar um retângulo ou clique em uma célula por vez. Toda área nomeada deve permanecer retangular.
Visualização ao vivo
Unidimensional: Gerador de CSS Flexbox.
Criar uma grade CSS com áreas nomeadas
Pinte uma grade de letras para template-areas, ou escolha uma predefinição. A visualização mostra cada região com uma tonalidade distinta.
Perguntas frequentes
O que é grid-template-areas?
Uma forma de nomear regiões de um layout (header, sidebar, main…) e posicionar itens pelo nome em vez de números de linha. Clique nas células abaixo para pintar as letras das áreas — o CSS é atualizado ao vivo.
Posso começar com uma predefinição?
Sim — dez predefinições de layout, incluindo Holy grail, dashboard, magazine e app shell, carregam áreas nomeadas com um clique.
Algo é enviado?
Não. O CSS é gerado totalmente no seu navegador.
Última atualização: