Comment utiliser : 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.
Aussi recherché comme : grid layout generator, css grid builder, grid-template-areas generator, css grid template, responsive grid generator, grid css online, layout generator.
Outils complémentaires : 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.
Questions fréquentes
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".
Puis-je installer CSS Grid Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. CSS Grid Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.