# Générateur de grille CSS

> Prévisualise les pistes et les espacements de grille et copie le CSS.

[Open tool](https://www.toolcabana.com/fr/css-grid-layout-generator) · [Design et CSS](https://www.toolcabana.com/fr/category/design-and-css)

Tool ID: css-grid-layout-generator. Requested language: fr. Description language: fr. Complete guide translation: yes.

## Overview (en)

CSS grid layout generator writes grid CSS from a column count, row count and gap, and previews numbered cells. Choose 1 to 12 columns and 1 to 12 rows with a 0 to 100 px gap; columns use repeat(n, minmax(0, 1fr)) so they share the width equally, and rows size automatically. Download the rules as a .grid class in grid.css.

## Supported tasks (fr)

Prévisualise les pistes et les espacements de grille et copie le CSS.

## Steps (fr)

1. Saisissez les valeurs demandées dans le panneau des paramètres.
2. Définissez les colonnes, les lignes et l'espacement (px).
3. Lancez le générateur de grille CSS, vérifiez le résultat, puis utilisez les commandes de copie ou de téléchargement disponibles.

## Settings

- Colonnes (fr; key: columns; type: number); minimum: 1; maximum: 12
- Lignes (fr; key: rows; type: number); minimum: 1; maximum: 12
- Espacement (px) (fr; key: gap; type: number); minimum: 0; maximum: 100

## Limitations (fr)

Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.

## Privacy and connections (fr)

Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.

## Questions (fr)

### Why does the grid use minmax(0, 1fr) instead of 1fr?

A plain 1fr track has an automatic minimum, so long words or wide content can stretch a column. minmax(0, 1fr) lets columns shrink below their content width, keeping all columns equal. The generator applies it to every column.

### Can I make grid columns of different widths with this generator?

No. It produces equal-width columns with repeat() and rows set to auto height. For uneven tracks, copy the CSS and edit grid-template-columns by hand, for example to 2fr 1fr.

### What does the grid CSS download contain?

grid.css contains a .grid selector with display: grid, the column and row templates and the gap. Add the class to your container element, or copy just the declarations from the text output into an existing rule.

### Où ma saisie est-elle traitée ?

Cette opération traite sa source dans votre navigateur. La copie et le téléchargement sont des actions explicites ; la saisie source n'est enregistrée ni dans un compte ni dans l'historique.

### Quelles sont les limites de saisie ?

Les images respectent la limite existante de 32 mégapixels du canevas. Jusqu'à 100 images sources sont autorisées lorsque c'est pris en charge. Le HTML collé est limité à 200 000 caractères ; les diagrammes Mermaid à 20 000 caractères et 300 lignes. La génération SVG et PNG nécessite un navigateur.

## Related tools

- [CSS clamp calculator](https://www.toolcabana.com/fr/css-clamp-calculator)
- [CSS flexbox playground](https://www.toolcabana.com/fr/css-flexbox-playground)
- [CSS cubic Bezier editor](https://www.toolcabana.com/fr/css-cubic-bezier-editor)
- [CSS clip-path maker](https://www.toolcabana.com/fr/css-clip-path-maker)