Convertidor gratuït
Quadrícula CSS Generador de maquetació
Genereu visualment dissenys de quadrícula CSS amb vista prèvia en directe. Ajusteu les columnes de la plantilla de la quadrícula, les files, el buit, els elements de justificació, els elements d'alineació i molt més: gratuïts i del costat del client.
Vista prèvia en directe
1
2
3
4
5
6
Columnes (repeat(3, 1fr))
Files (repeat(2, 1fr))
buit de columna (12px)
0px16px32px
interval de fila (12px)
0px16px32px
justificar-elements
alinear elements
Sortida CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
column-gap: 12px;
row-gap: 12px;
justify-items: stretch;
align-items: stretch;
}
.item {
padding: 1rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-align: center;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
}