Design et Ressources

Générateur de CSS Grid

Générez des mises en page CSS Grid avec colonnes, espacement et tailles de lignes.

Catégorie

Design et Ressources

Générateur de CSS Grid

css gridlayoutGénérateurfrontend

Sortie

Generated CSS Grid

Columns

Gap

18px

Éléments

.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  grid-auto-rows: minmax(110px, auto);
}

.grid-layout .cell.featured {
  grid-column: span 2;
}

.grid-layout .cell.tall {
  grid-row: span 2;
}

.grid-layout .cell {
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: white;
}

Grid layout Aperçu

Live canvas