¿Contenedor o Grid? Cómo se mapea tu maquetación CSS en Elementor

Elementor tiene dos modos de diseño para un Contenedor: Flexbox y Grid. Cuál obtienes lo determina el valor display que el navegador realmente calcula 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 construida 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 elementos se transfieren.

Las columnas iguales se mantienen como fr

Vale la pena entender esto. 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 realmente responsive que se redistribuye al redimensionar el contenedor. Las pistas realmente desiguales (por ejemplo, 2fr 1fr) se conservan como plantilla personalizada.

Las filas se ajustan al contenido

Las filas se configuran en auto en lugar del valor predeterminado de Elementor de filas de igual altura, de modo que las tarjetas con distintas longitudes de texto conservan sus alturas naturales en lugar de estirarse para igualar a la más alta.

Anchos, relleno 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 podría indicar 260px a cada lado.

Escribir esos píxeles en Elementor rompería el centrado en cuanto cambiara el tamaño de pantalla. Por eso, un bloque con un ancho máximo y márgenes automáticos simétricos se detecta como autocentrado y, en su lugar, se expresa a la manera de Elementor: Ancho del contenido = En caja con tu ancho máximo, que se centra de forma nativa en cualquier tamaño de pantalla. Los márgenes laterales resueltos se descartan.

El número de columnas se mide en cada punto de ruptura, no se adivina

Una cuadrícula que muestra cuatro columnas en escritorio y dos en tableta no es un diseño que se encoge: son valores diferentes en anchos diferentes, y un convertidor que solo mira el renderizado de escritorio pasará por alto el resto.

Por eso, la página se mide más de una vez. El diseño se vuelve a leer en cada ancho de punto de ruptura y el número de columnas para ese ancho se escribe en el campo responsive propio de Elementor para ese dispositivo. Con la configuración predeterminada, eso significa dos pasadas adicionales, a 820px y 390px — una tableta típica en vertical y un teléfono típico — y los resultados van a los campos estándar de tableta (hasta 1024px) y móvil (hasta 767px) de Elementor. Medir a un ancho de dispositivo real y no al inicio de cada rango es importante: una media query escrita a mano a 760px o 640px no se activa a 767px, por lo que una pasada allí pasaría por alto la mayoría de los diseños móviles.

Activa los puntos de ruptura ampliados y mide cinco: portátil a 1280px, tablet-extra a 1100px, tableta a 960px, mobile-extra a 820px y móvil a 390px. Úsalo solo si tienes esos puntos de ruptura activados en los ajustes del sitio de Elementor; escribir valores para dispositivos desactivados solo añade ruido por el que tendrás que desplazarte después.

Los elementos ocultos se ocultan, no se eliminan

Los elementos que se calculan como display: none o visibility: hidden son una pequeña trampa. Son invisibles, por lo que es tentador suponer que un convertidor debería omitirlos; pero un menú solo para móvil, un panel off-canvas o un modal cerrado por defecto es invisible en el momento de la conversión y sigue siendo parte del diseño.

Se convierten y reciben el indicador responsive ocultar en escritorio de Elementor en lugar de descartarse. El contenido sobrevive; tú decides después si corresponde. Si algo que esperabas falta en el lienzo, revisa los interruptores de visibilidad responsive antes de asumir que se perdió.

Diseños sin ningún mapeo

Tres patrones de origen no tienen equivalente en Elementor, y es mejor saberlo antes de convertir que después:

• Diseños basados en float. Nada lee los floats, porque los contenedores de Elementor no tienen concepto de ellos. Un antiguo diseño de dos columnas construido con float: left se convierte como bloques apilados. Es la señal más clara de que el marcado es anterior a flexbox y vale la pena modernizarlo en el origen.
• Diseños con tablas. Misma historia: una tabla de maquetación es estructura, no diseño, y llega como bloques anidados en lugar de columnas.
• Áreas de grid con nombre. grid-template-columns se convierte; grid-template-areas no, porque el Grid de Elementor no tiene equivalente de regiones con nombre. Los hijos vuelven al orden del código fuente.

Elegir el modo correcto después de la importación

Nada de la conversión es definitivo. El modo de diseño de un Contenedor es un desplegable en Elementor, y al cambiarlo se conservan los hijos; así que si una sección llegó como Flexbox y prefieres gestionarla como Grid, cámbialo y configura las columnas. Dos reglas prácticas:

• Grid cuando los hijos deben alinearse en ambas direcciones: conjuntos de tarjetas, matrices de características, galerías de imágenes, cualquier cosa donde te importe que la fila dos se alinee con la fila uno.
• Flexbox cuando los hijos fluyen en una dirección y los tamaños dependen del contenido: barras de navegación, grupos de botones, un encabezado junto a una insignia, filas de objetos multimedia.

El convertidor elige la que coincida con el código fuente, que es el valor predeterminado correcto. Pero el marcado de origen suele ser el resultado de la costumbre más que de una decisión, y un diseño construido con flexbox porque el autor siempre usa flexbox bien podría ser una cuadrícula.

Consejos prácticos

• Prefiere gap antes que márgenes entre hijos de grid/flex: los gaps se mapean limpiamente, los márgenes por hijo no.
• Usa max-width + margin:0 auto para secciones centradas; se convierte correctamente en un contenedor En caja.
• 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 responsive del wrap es más fácil de ajustar allí.
• Haz coincidir tu ajuste de puntos de ruptura ampliados con lo que realmente está activado en Elementor, o obtendrás valores responsive para dispositivos que tu sitio no usa.