CSS Grid Generator
Build CSS Grid layouts visually: define rows, columns, gaps and alignment. Live preview and ready-to-copy CSS. Everything in your browser.
Preview
CSS Grid em 30 segundos
display: grid transforma o elemento em uma grade. grid-template-columns define a quantidade e largura das colunas (use 1fr para fração do espaço, auto para tamanho do conteúdo). gap espaça as células sem margens.
repeat(N, X) repete o padrão X N vezes. repeat(auto-fill, minmax(180px, 1fr)) cria quantas colunas couberem com largura mínima de 180px — perfeito para grids responsivos de cards. Tudo no navegador.
Build CSS Grid layouts visually
For two-dimensional layouts on the web nothing matches CSS Grid, yet the syntax tends to scare off beginners. This generator turns the whole thing visual: you set rows, columns, gaps and alignments by clicking and adjusting, and the grid takes shape right in front of you.
You can control how many rows and columns there are and their size, the gaps between them and the justification and alignment properties, all without writing a single line of CSS. At the end you copy the generated code, ready to paste into your project and double as a study of how each property translates.
Everything happens in the browser, no install. It helps people learning Grid and people who just want to prototype a layout in a hurry.
Related Tools
CSS Clamp Calculator
Generate CSS clamp() values for fluid typography and spacing. Enter minimum/maximum sizes and viewport widths to get a ready-to-paste clamp() function.
CSS Loader Generator
Create pure-CSS spinners and loaders in 8 styles (ring, dots, pulse, bars, etc.). Adjust color, size and speed. No libs, no GIFs. Everything in your browser.
CSS Triangle Generator
Create pure CSS triangles using the border trick. Choose direction (up, down, left, right), size and color. Useful for tooltips, arrows and pointers. Everything in your browser.