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

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