Como usar: CSS Grid Generator
- Set the number of columns and rows and the gaps — or start from a preset like Holy grail.
- Edit the track sizes (above the grid for columns, left for rows):
1fr,240px,auto,minmax(0, 1fr). - Drag across cells to create an area and give it a name like
headerorsidebar. - Copy the CSS and the HTML skeleton into your project.
Grid areas in a nutshell
grid-template-areas lets you draw the layout with names: each string is a row, each word a column, and a dot (.) leaves a cell empty. Children are placed with grid-area: name, so the CSS reads like a picture of the page.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}Track sizes
| Value | Meaning |
|---|---|
1fr | one share of the free space |
minmax(0, 1fr) | like 1fr, but long content can’t stretch the column |
auto | as big as the content |
240px, 20rem | a fixed size |
repeat(auto-fill, minmax(200px, 1fr)) | as many columns as fit — great for card grids |
Areas must be rectangles — the tool only lets you draw rectangles, so the CSS is always valid. For a single row or column of items, flexbox is often simpler. Related: Clamp Calculator, CSS Formatter.
Também pesquisado como: grid layout generator, css grid builder, grid-template-areas generator, css grid template, responsive grid generator, grid css online, layout generator.
Ferramentas que combinam com: CSS Grid Generator
- CSS Flexbox Generator — See exactly what every flexbox property does: set the direction, wrapping, justify-content, align-items and gap, add or remove items, and click any item to set its flex-grow, shrink, basis, order and align-self.
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
Perguntas frequentes
How do I create a CSS grid layout?
Set columns and rows, drag across cells to define named areas (header, sidebar, main…), and copy the generated grid-template-columns, grid-template-rows and grid-template-areas CSS with the HTML.
What is the difference between 1fr and minmax(0, 1fr)?
1fr has a minimum of its content’s size, so a long word or wide image can make the column grow. minmax(0, 1fr) allows the column to shrink below its content, keeping columns equal.
Why must grid areas be rectangles?
The CSS Grid spec only allows rectangular named areas; an L-shaped area makes the whole grid-template-areas declaration invalid.
How do I make the grid responsive?
Add a media query that redefines grid-template-columns and grid-template-areas for small screens — for example a single column with "header" "main" "sidebar".
Posso instalar o CSS Grid Generator como um aplicativo da web e usá-lo offline?
Sim. O CSS Grid Generator é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.