LocalToolsCollection d’outils de navigateur hors ligne

Catégorie: Développement

Générateur de grille CSS

Idée interneUn outil manque ?

Construisez une mise en page grid-template et copiez le CSS

Réglez le nombre de colonnes et de lignes et l'espacement sur un aperçu de grille en direct, en basculant en option les colonnes vers une piste minmax() pour qu'elles puissent rétrécir avant de passer à la ligne, puis copiez la déclaration de conteneur finale. Rien ne quitte votre navigateur.

Sortie
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

Tout sur cette page est traité dans votre navigateur. Rien n'est envoyé.

À quoi sert cet outil

grid-template-columns: repeat(n, 1fr) donne des colonnes égales qui ne rétrécissent jamais sous leur contenu, ce qui déborde sur les écrans étroits. Passer à minmax(min, 1fr) permet à chaque colonne de rétrécir jusqu'à un plancher avant que la grille n'abandonne et ne passe à la ligne, la différence entre une mise en page qui se lit bien sur téléphone et une qui ne se lit pas. Cet outil construit les deux formes à partir des mêmes réglages afin que la différence soit visible sur une vraie grille, pas seulement dans la déclaration.

Mode d'emploi

  1. Réglez le nombre de colonnes et de lignes.
  2. Réglez l'espacement entre les cellules.
  3. Activez les colonnes minmax() si vous voulez qu'elles rétrécissent sur les écrans étroits, puis copiez le CSS.

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Ce que vous saisissez n'est jamais envoyé, stocké ni partagé : fermer l'onglet suffit à tout effacer.

Questions fréquentes

L'aperçu est-il une vraie grille CSS ?
Oui. Les cellules numérotées sont disposées avec les grid-template-columns et grid-template-rows exacts que vous réglez.
Que change réellement minmax() ?
Sans elle, les colonnes repeat(n, 1fr) restent égales mais ne rétrécissent jamais sous leur contenu, donc un conteneur étroit déborde simplement. minmax(min, 1fr) permet à chaque colonne de rétrécir jusqu'au minimum avant que le navigateur ne cherche un autre moyen de les faire tenir.
Quelque chose est-il envoyé ?
Non. La déclaration est du texte construit à partir des réglages que vous choisissez, et la grille d'aperçu est affichée localement dans la page.

Revenir à tous les outils