Generateur CSS Grid

Constructeur visuel de mise en page CSS Grid.

Presets:

Colonnes (3)

Lignes (2)

Espacement colonnes: 16pxEspacement lignes: 16px

Justifier elementsAligner elements

Apercu

CSS genere

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

HTML genere

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Generateur CSS Grid gratuit

Construisez des mises en page CSS Grid visuellement.

Reference des proprietes

Propriete	Description	Exemple
grid-template-columns	Definit les colonnes	1fr 1fr 1fr
grid-template-rows	Definit les lignes	auto 1fr auto
gap	Espacement	16px
justify-items	Alignement horizontal	stretch
align-items	Alignement vertical	stretch

Questions frequentes

Qu'est-ce que CSS Grid ?

CSS Grid est un systeme de mise en page bidimensionnel.

Grid vs Flexbox ?

Grid est 2D, Flexbox est 1D.

Que signifie "fr" ?

"fr" represente une fraction de l'espace disponible.

Support navigateur ?

Oui, supporte par tous les navigateurs modernes.

Grid et Flexbox ensemble ?

Oui, ils se completent parfaitement.

Outils connexes

CSS Flexbox Generator CSS Gradient Generator CSS Shadow Generator Em/Px Converter

𝕏 Twitter in LinkedIn

💬 User Feedback

Notez cet outil

3.6 / 5 · 47 avis

Plus d'outils

📐CSS Flexbox Generator 🌈Générateur de Dégradé CSS 📐Em/Px Converter

Restez informé

Recevez des astuces dev et les nouveaux outils chaque semaine.

Pas de spam. Désabonnez-vous à tout moment.

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

Enter or paste your data in the input field
Configure any options if available
Click the action button to process
Copy the result to your clipboard

Use Cases

Development and debugging workflows
Data format conversion
Code generation and formatting
Quick calculations and validation

FAQ

Is this Css Grid Generator tool free to use?

Yes, the Css Grid Generator tool is completely free. No registration or payment required.

Is my data secure?

Absolutely. All processing happens client-side in your browser. Your data never leaves your device or is sent to any server.

What formats does the Css Grid Generator tool support?

The tool supports all standard formats for CSS styling and formatting. Check the tool interface for specific format options.