Toolipedia
FR
← Tous les outils texte

Générateur de grille CSS

Créez une mise en page en grille avec colonnes, lignes et espacements, avec aperçu en direct.

  • Gratuit
  • Sans inscription
  • Fonctionne sur tous les appareils

À propos de Générateur de grille CSS

Réglez le nombre de colonnes et de lignes, la taille des gouttières et celle des pistes en unités fr, px ou auto, et regardez la grille se mettre à jour en direct avant de copier le CSS. L'unité fr répartit l'espace libre proportionnellement : 1fr 2fr donne donc une deuxième colonne deux fois plus large que la première.

Comment utiliser Générateur de grille CSS

  1. Réglez le nombre de colonnes et de lignes de votre grille.
  2. Ajustez la taille des colonnes et des lignes et l'écart entre les cellules.
  3. Copiez le code de la grille CSS et collez-le dans votre feuille de style.

Pourquoi utiliser cet outil ?

Aussi appelé

Questions fréquentes

Que signifie l'unité fr dans CSS Grid ?

Un fr est une fraction de l'espace restant dans le conteneur de grille. Avec des colonnes de 1fr 1fr 2fr, l'espace est divisé en quatre parts, dont deux pour la dernière colonne.

Comment rendre une grille responsive ?

Utilisez des tailles flexibles comme les unités fr ou minmax au lieu de pixels fixes, et changez le nombre de colonnes dans une media query pour les petits écrans.

Quelle est la différence entre gap et margin dans une grille ?

Gap ajoute de l'espace seulement entre les cellules, pas autour du bord extérieur. Les marges ajoutent de l'espace autour de chaque élément et peuvent se cumuler entre voisins.

Générateur de grille CSS est-il gratuit ?

Oui. Générateur de grille CSS est gratuit sur Toolipedia, sans inscription et sans filigrane.

Est-ce sûr ?

Oui. Tous les calculs se font dans votre navigateur et rien de ce que vous saisissez n’est envoyé à notre serveur.

Est-ce que ça fonctionne sur mon téléphone ?

Oui. L’outil fonctionne dans tout navigateur récent sur Android et iPhone, ainsi que sur tablette et ordinateur. Il n’y a rien à installer.

Faut-il un compte ?

Non. Ouvrez simplement la page et utilisez l’outil. Aucune inscription ni adresse e-mail n’est nécessaire.

Puis-je mettre Générateur de grille CSS sur mon propre site ?

Oui. Utilisez le bouton « Intégrer sur votre site » sous l'outil pour copier un court extrait de code et le coller dans votre page. C'est gratuit, sans compte, et l'outil continue de fonctionner dans votre page.

Outils similaires