Generador de layouts CSS

Previsualiza una distribución con Flexbox o Grid.

En tu dispositivo · Sin cuenta

Generador de layouts CSS procesa lo que introduces en este navegador. Los datos introducidos y los resultados se excluyen de las estadísticas de uso. Las herramientas recientes guardan sus nombres, el número de visitas y la fecha y hora de la última visita. Las herramientas guardadas solo almacenan sus nombres. Guardar borradores es opcional y el texto permanece en este dispositivo; puedes eliminarlo con los controles del borrador. Cargar texto desde una URL es opcional y establece una conexión con ese servidor; el servidor puede ver la URL y tu dirección IP. La opción «Usar en» conserva temporalmente los datos en esta pestaña para pasarlos a otra herramienta. La siguiente herramienta los elimina al abrirse y los ignora si ha pasado más de un minuto.

«Copiar enlace» incluye en la dirección los datos que elijas compartir. Cualquiera que tenga el enlace puede volver a abrirlos. Se excluyen los archivos y los resultados generados. Las herramientas de contraseñas y claves solo comparten los ajustes.

Español

Etiquetas de los elementos, una por línea

Distribución

Opciones y archivo local

Columnas de Grid

Separación (px)

Tamaño base de Flexbox (px)

Abrir un archivo de texto de este dispositivo

Los ajustes opcionales solo se aplican a esta pestaña.

Tu resultado

Código fuente HTML

Más

Atajos de teclado

Sobre los enlaces y el reinicio

Los enlaces incluyen los datos que introduces y la configuración. Cualquiera que tenga el enlace puede verlos, así que no incluyas texto privado. Los archivos y los resultados generados no se incluyen; las selecciones aleatorias se repiten.

Al restablecer, la herramienta se recarga con sus valores iniciales y libera los archivos abiertos y los controles de dispositivos. Los borradores guardados permanecen en este dispositivo hasta que los elimines.

Cómo funciona el generador de layouts CSS

Genera una distribución adaptable con Grid o con Flexbox que permita pasar los elementos a otra línea, a partir de sus etiquetas. Cambia el número de columnas de Grid, la separación o el tamaño base de Flexbox y luego copia o descarga el mismo HTML independiente que utiliza la vista previa.

Siguiente: Formateador CSS

Siguiente: Calculadora de especificidad CSS

Siguiente: Comprobador de contraste

Ejemplo

Una cuadrícula de tres columnas usa repeat(3, minmax(0, 1fr)) para que las etiquetas largas puedan ocupar varias líneas dentro de columnas del mismo ancho. Flexbox distribuye los elementos en varias líneas según su tamaño base preferido y el espacio disponible.

Antes de usar el resultado

Es un punto de partida para una distribución, no un creador de sitios web completos ni una auditoría de compatibilidad con navegadores. La vista previa tiene estilos de demostración fijos. Grid conserva el número de columnas elegido en anchos reducidos; añade consultas de medios si tu diseño final necesita un número distinto de columnas.

Citar esta página

Estilo de cita

ToolOctopus. “Generador de layouts CSS.” Actualizado 7 de octubre de 2026. https://tooloctopus.com/es/generador-de-layouts-css.

Añade la fecha de consulta si tus instrucciones lo requieren.

Las citas se formatean con citeproc-js, de Frank Bennett, y estilos de Citation Style Language. Licencia y código fuente.