Elementor tiene dos modos de diseño para un Contenedor: Flexbox y Grid. Cuál obtienes lo decide el valor display que el navegador calcula realmente para tu elemento, no los nombres de clase.
display:flex → Contenedor Flexbox
El convertidor transfiere las propiedades que importan: dirección (fila/columna), wrap, justify-content, align-items y el gap. Así, una fila horizontal de tarjetas creada con flexbox llega como un Contenedor con Dirección = fila y el mismo gap que tenías en CSS.
display:grid → Contenedor Grid
Los diseños de cuadrícula se convierten en un Contenedor Grid, y el editor los etiqueta como Grid en el panel Estructura con el icono de cuadrícula. Las columnas, filas, gaps y las opciones de alineación de los elementos se transfieren.
Las columnas iguales se mantienen como fr
Esto vale la pena entenderlo. El navegador resuelve grid-template-columns: repeat(5, minmax(0, 1fr)) en píxeles concretos — algo como 241.597px 241.597px 241.604px …. Observa las pequeñas diferencias de subpíxeles. Si un convertidor comparara esas cadenas de forma ingenua, decidiría que las columnas son desiguales y escribiría anchos fijos en píxeles, lo que impediría que tu cuadrícula fuera responsive.
En su lugar, las columnas se comparan numéricamente con una tolerancia, de modo que las pistas casi idénticas se reconocen como iguales y se escriben como N fr: una cuadrícula responsive real que se reordena al cambiar el tamaño del contenedor. Las pistas realmente desiguales (por ejemplo, 2fr 1fr) se conservan como una plantilla personalizada.
Las filas se ajustan al contenido
Las filas se establecen en auto en lugar de las filas de igual altura predeterminadas de Elementor, para que las tarjetas con distintas longitudes de texto mantengan sus alturas naturales en lugar de estirarse para igualar a la más alta.
Anchos, padding y la trampa del centrado
Un patrón muy común es una columna de contenido centrada: max-width: 760px; margin: 0 auto;. Aquí el navegador resuelve auto en un valor real en píxeles que depende del viewport actual; en un ancho determinado podría indicar 260px en cada lado.
Escribir esos píxeles en Elementor rompería el centrado en cuanto cambiara el tamaño de la pantalla. Por eso, un bloque con un ancho máximo y márgenes automáticos simétricos se detecta como autocentrado y se expresa a la manera de Elementor: Ancho del contenido = Boxed con tu ancho máximo, lo que lo centra de forma nativa en cualquier tamaño de pantalla. Los márgenes laterales calculados se descartan.
Consejos prácticos
- Prefiere
gapa los márgenes entre los hijos de grid/flex: los gaps se asignan limpiamente, los márgenes por hijo no. - Usa
max-width+margin:0 autopara las secciones centradas; se convierte correctamente en un Contenedor Boxed. - Evita mezclar floats con flex/grid. Los floats no tienen equivalente en Elementor y requerirán trabajo manual.
- Si una fila no debe ajustarse en móvil, configúralo en Elementor después de la importación: el comportamiento de wrap responsive es más fácil de configurar allí.