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.
Entrée
Générateur de CSS Grid
css gridlayoutGénérateurfrontend
Sortie
Generated CSS Grid
Columns
3
Gap
18px
Éléments
6
.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

