Aller au contenu principal
LibraTool logoLibraTool

Générateur CSS Grid — outil gratuit

Concevez visuellement une grille CSS — pistes, unités et espacements — et copiez le CSS et le HTML générés.

Fonctionne hors ligne une fois chargé
Préréglages
Colonnes (3)
Lignes (2)
Aperçu en direct
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 Tout s'exécute dans votre navigateur — rien n'est téléchargé.

Comment ça marche

Concevez une grille CSS visuellement : ajoutez jusqu'à 8 colonnes et 8 lignes, réglez chaque piste sur fr, px, auto ou min/max-content, et ajustez les espacements de lignes/colonnes. L'aperçu en direct numéroté se met à jour instantanément et le CSS grid-template généré plus le HTML correspondant sont à un clic de votre presse-papiers.

  1. 1
    Façonnez la grille
    Ajoutez/retirez des colonnes et des lignes avec + et −.
  2. 2
    Réglez les pistes
    Chaque colonne et ligne reçoit sa propre unité (1fr, 100px, auto…).
  3. 3
    Ajustez les espacements
    Curseurs séparés pour row-gap et column-gap.
  4. 4
    Copiez le code
    CSS prêt pour la production et le squelette HTML correspondant.

Tout s'exécute dans votre navigateur — rien n'est envoyé en ligne.

Outils associés

↔️

Générateur CSS Flexbox

Expérimentez avec la direction flex, le retour à la ligne, la justification et l'alignement sur des éléments en direct — et copiez le CSS.

Essayer
📐

Générateur CSS clamp()

Générez une valeur CSS clamp() fluide pour la typographie et l'espacement adaptatifs. Définissez les tailles min/max et la plage de viewport, consultez un aperçu en direct et copiez le CSS en une ligne.

Essayer
📓

Papier imprimable — Papier ligné, quadrillé, pointillé et à portées (PDF)

Imprimez votre propre papier : ligné (grands ou petits carreaux de type « college ruled »), quadrillé, pointillé, isométrique, d’écriture, à portées musicales ou pour notes Cornell, en A4, Letter, A5 ou Legal, avec la couleur de ligne de votre choix et autant de pages que nécessaire. Un PDF vectoriel net, créé dans votre navigateur.

Essayer

Questions fréquemment posées