Quel support navigateur puis-je attendre ?

CSS Grid est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari et Edge). Ce générateur produit une syntaxe standard compatible sans avoir besoin de polyfills complexes.

Que sont les unités fractionnelles (fr) ?

L'unité `fr` représente une fraction de l'espace disponible dans le conteneur de grille. Utiliser `1fr` pour plusieurs colonnes garantit qu'elles partagent équitablement l'espace restant après que les pistes de largeur fixe ont été prises en compte.

Mes données de mise en page sont-elles enregistrées sur un serveur ?

Non. Le générateur s'exécute entièrement dans votre navigateur et votre configuration de mise en page ne quitte jamais votre machine. Vous pouvez copier le code directement dans votre presse-papiers pour l'utiliser dans votre projet.

Quelle est la différence entre les pistes et les écarts (gaps) ?

Les pistes (tracks) sont les colonnes et les lignes réelles qui contiennent le contenu, tandis que les écarts (gaps) définissent l'espace vide entre ces pistes. Vous pouvez ajuster le `grid-gap` pour contrôler l'espacement sans affecter le dimensionnement des pistes.

Couleur & Design

Générateur de Mise en Page CSS Grid

Drag track sizers, copy the CSS Grid.

Runs in your browser

Columns3Rows2Gap12px

Column tracks

Row tracks

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 80px 80px;
  gap: 12px;
}

Note de la rédaction

Understanding · The first real layout system the web has had.

Ce chapitre approfondi n'est actuellement disponible qu'en anglais. L'outil de conversion ci-dessus fonctionne dans votre langue ; le long article explicatif n'a pas encore été traduit.

Questions fréquentes

Quick answers.

›What browser support can I expect?

CSS Grid is supported by all modern browsers (Chrome, Firefox, Safari, and Edge). This generator produces standard syntax that is compatible without the need for complex polyfills.

›What are fractional units (fr)?

The `fr` unit represents a fraction of the available space in the grid container. Using `1fr` for multiple columns ensures they share the remaining space equally after fixed-width tracks are accounted for.

›Is my layout data saved to a server?

No. The generator runs completely in your browser and your layout configuration never leaves your machine. You can copy the code directly to your clipboard for use in your project.

›What is the difference between tracks and gaps?

Tracks are the actual columns and rows that hold content, while gaps (gutters) define the empty space between those tracks. You can adjust the `grid-gap` to control spacing without affecting track sizing.

Les internautes recherchent aussi

Outils similaires

More in this room.

Tout voir dans Couleur & Design