Générateur de Grid CSS

Définissez visuellement les colonnes, les lignes, les étendues et les espacements pour générer du code de grille.

Colonnes4

Lignes4

Espacement (px)16px

Étendue de colonne

Étendue de ligne

Sortie CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 16px;
}