design
Gratis
Sin registro
Generador de códigos QR
Construya visualmente diseños CSS Grid arrastrando elementos por las celdas y exporte el CSS.
Cargando la herramienta…
Acerca de esta herramienta
Defina columnas y filas con tamaños de pista personalizados (fr, px, %, auto), establezca el espacio y haga clic y arrastre en la vista previa del grid en vivo para abarcar elementos en múltiples celdas. La herramienta genera declaraciones listas para copiar de grid-template-columns, grid-template-rows, gap y grid-column/grid-row. Opcionalmente asigne áreas de grid con nombre.
Cómo usar
- 1 Paso 1: Establezca el número de columnas (1–12) y filas (1–8) y el tamaño del espacio.
- 2 Paso 2: Ingrese los tamaños de pista para cada columna y fila usando unidades fr, px, % o auto.
- 3 Paso 3: Haga clic y arrastre en las celdas del grid para colocar y dimensionar los elementos.
- 4 Paso 4: Copie el CSS generado y péguelo en su hoja de estilos.