Diseñar con la tecnología Flexbox

Nota: este contenido es válido tanto para el modo flex del Classic Editor como para el Editor 2.0. Para saber qué versión del editor usas, consulta «Editor Versions».

La tecnología flexbox (o «flex», para abreviar) es un módulo de diseño de CSS para colocar elementos en secciones y columnas, de modo que se ajusten (crezcan o se encojan) y se alineen a la perfección dentro de un contenedor. Así puedes diseñar secciones responsivas y precisas al píxel que se adaptan a cualquier tamaño de pantalla. Si usas el Classic Editor, entra en el modo flex para diseñar con tecnología flexbox. Si usas el Editor 2.0, la tecnología flexbox está activa de forma predeterminada.

Panel de diseño de flex

El panel de diseño aparece en la parte derecha del modo flex y contiene las propiedades de diseño del elemento seleccionado (sección, columna, widget, columna interior o cuadrícula avanzada). Cada elemento tiene propiedades distintas que puedes ajustar en el panel, así que las opciones cambian según lo que hayas seleccionado. Entre ellas están la alineación, el diseño, el espaciado, el tamaño y más, según el elemento.

Para abrir el panel de diseño, haz clic en un elemento estando en el modo flex y luego en Editar diseño (solo necesitas estar en el modo flex si usas el Classic Editor). El panel se abre a la derecha del modo flex para no estorbarte al ver y editar tu diseño. Cuando lo cierres, puedes volver a abrirlo con el icono del panel de diseño, en la esquina superior derecha.

Secciones del panel de diseño

El panel de diseño consta de 5 secciones: Alinear, Diseño, Espaciado, Tamaño y Animaciones y efectos. A continuación describimos cada una y lo que puedes hacer con ella.

Align

Disponible para elementos individuales dentro de una columna o una columna interior. Los elementos individuales de una columna o de una columna interior vertical con disposición automática vertical pueden alinearse a la izquierda, al centro o a la derecha, o estirarse en horizontal para ocupar el 100% del ancho de su contenedor.

También puedes alinear elementos desde el menú flotante haciendo clic en el icono Alinear.

Diseño

Ajustes predefinidos. Elige un diseño predefinido para los elementos dentro de una sección. Las opciones incluyen alineación vertical u horizontal.

Elementos por fila Si tu contenido ocupa más de una fila, usa el menú desplegable para elegir cuántos elementos aparecen por fila.

Artículos ajustados Aparece cuando tienes filas de contenido y te permite definir cómo encajan los elementos dentro de las filas. Resulta útil si tienes un número impar de elementos.

Ancho completo Antes se llamaba «full bleed». El ancho completo solo está disponible para las secciones y solo se puede cambiar desde el breakpoint principal de escritorio. En Encender, el contenido ocupa todo el ancho de la pantalla. En Apagar, el ancho del contenido llega como máximo a 1920 píxeles. De forma predeterminada, el ancho completo está en Apagar. Para saber más sobre los breakpoints, consulta «Screen Sizes and Devices».

Alineación del contenido Te permite alinear en vertical o en horizontal varios elementos de una columna o columna interior a la vez. En el Classic Editor, los elementos solo se pueden alinear de uno en uno y en horizontal. Para más información, consulta la sección «Alineación y espaciado en flex» más abajo.

Align Rows. Te permite ajustar la alineación de las filas dentro de una columna o columna interior. Este ajuste no afecta a la alineación de los elementos dentro de las filas, solo a las filas en sí.

Spacing

Espacio entre elementos Te permite definir de una vez el espacio entre columnas o entre widgets, y se aplica a todas las columnas de una sección o a todos los widgets de una columna. En las columnas, si la disposición automática es vertical, el espacio entre widgets se mide en píxeles; si es horizontal, se mide en porcentajes. Esta propiedad no se aplica a los elementos dentro de columnas interiores ni de cuadrículas avanzadas.

Configurar márgenes y relleno Los márgenes son el espacio entre el borde del elemento y el borde de la sección, columna, columna interior o cuadrícula avanzada que lo contiene. De forma predeterminada, los valores del margen y el padding horizontales están enlazados: si cambias el valor izquierdo, el derecho se actualiza automáticamente para igualarlo. Si no quieres que estén enlazados, haz clic en el icono de enlace.

Ten en cuenta que los márgenes en línea de los elementos dentro de columnas o columnas interiores se pueden ajustar directamente en el canvas. Para saber más, consulta «Outer and Inner Spacing».

El padding es el espacio interior del elemento. Haz clic en el número del margen o del padding para escribir un valor nuevo y usa el menú desplegable para elegir la unidad en la que se mide (px, %, vh, vw o A). De forma predeterminada, el espaciado horizontal se mide en porcentajes y el vertical en píxeles.

Por ejemplo, si seleccionas una columna y pones el padding izquierdo en 5 px, añade 5 px de espacio entre el borde izquierdo de la columna y el borde exterior de los elementos que hay dentro. Si en esa misma columna pones el margen izquierdo en 5 px, añade 5 px de espacio entre el borde de la columna y el borde de la sección que la contiene.

Restablecer espaciado de sección. Al hacer clic en él, en el panel de diseño o en el menú flotante, restablece a cero el padding o los márgenes del elemento seleccionado.

Tamaño

Según el elemento seleccionado, puedes ajustar la altura y el ancho, y sus valores máximo y mínimo. En el modo flex, la altura se puede medir en px, vh, porcentaje y A. Ahora bien, la altura de las columnas flex y el espacio entre columnas solo se pueden medir en porcentaje. Para saber más sobre las unidades de tamaño, consulta la sección «Unidades de tamaño» más abajo.

Las unidades de tamaño predeterminadas cambian según el elemento. Por ejemplo, de forma predeterminada las cajas de texto tienen un ancho del 100% y los botones, un ancho de 280px.

En las secciones solo puedes cambiar la altura. El ancho de la sección lo define el dispositivo, mientras que el ancho del contenido de la sección lo define el ajuste Content Width en Site Theme. En las columnas solo puedes cambiar el ancho; la altura la define la altura de la sección o sus elementos internos. En las columnas interiores y los widgets puedes fijar la altura y el ancho, junto con sus valores mínimo y máximo. Puedes usar cualquier unidad de tamaño.

Animaciones y efectos

Las propiedades de animación y fondo del modo flex son parecidas a las del Classic Editor.

Esta es la lista de disparadores y animaciones disponibles:

• Animaciones para el disparador Scroll:
  • Fade
  • Slide
  • Bounce
  • Roll
  • Rotate
  • Zoom
  • Flip
• Animaciones para el disparador Entrance:
  • Fade in
  • Slide in
  • Bounce in
  • Rotate in
  • Roll in
  • Zoom in
  • Flip in
  • Flash
  • Pulse
  • Rubber band
  • Shake
  • Swing
  • Tada
  • Wobble

Nota: el parallax está disponible para todos los widgets y contenedores, y se puede aplicar en todos los tamaños de pantalla. Para activarlo, haz clic en la imagen, elige Editar diseño, baja hasta la sección Fondo del panel de diseño y abre el menú Image Position.

La opción de mantener una imagen de fondo estática no está disponible en tablet, móvil ni Mac OS por una limitación de iOS.

Panel de diseño de las cuadrículas avanzadas

Las cuadrículas avanzadas tienen propiedades en el panel de diseño que no están disponibles para otros tipos de elemento, porque permiten crear composiciones libres y elementos superpuestos. Te recomendamos revisar tu diseño en distintos breakpoints.

Alinear Los elementos individuales de una cuadrícula avanzada se pueden alinear y estirar en cualquier dirección, ya que no los limita la disposición automática.

Orden. En la sección Disposición del panel de diseño, esta propiedad solo se puede usar cuando hay varios elementos dentro de una cuadrícula avanzada. Te permite traer un elemento seleccionado al frente, hacia delante, al fondo o hacia atrás. Para más información, consulta la sección «Crear elementos superpuestos en flex» más abajo.

Reorganizar diseño Te permite elegir cómo se disponen las columnas y las filas dentro de la cuadrícula avanzada para crear un diseño.

Personalizar el diseño Te permite elegir cómo se disponen las columnas y las filas dentro de la cuadrícula avanzada para crear un diseño.

Pin. Te permite definir la posición del elemento dentro de la cuadrícula. Una vez fijada, el elemento se queda en el mismo sitio aunque cambie el tamaño de la cuadrícula.

Ubicación de la cuadrícula Disponible para los elementos dentro de cuadrículas avanzadas que se han dividido en columnas o filas para crear un diseño. Muestra dónde está el elemento en la cuadrícula.

Conservar proporciones En Encender, hace que los elementos dentro de una cuadrícula avanzada conserven sus proporciones aunque cambie el tamaño de la cuadrícula.

El widget Image también tiene una opción Keep proportion, que conserva sus proporciones originales.

Unidades de tamaño

Nota: este contenido es válido tanto para el modo flex del Classic Editor como para el Editor 2.0. Para saber qué versión del editor usas, consulta «Editor Versions».

Entender y usar bien las unidades de tamaño es fundamental para crear diseños que no solo se vean bien, sino que también se adapten a distintos dispositivos y tamaños de pantalla. El panel de diseño, situado a la derecha del editor canvas en el Editor 2.0 o cuando estás en el modo flex del Classic Editor, es el centro de control de las propiedades de diseño de los elementos seleccionados, entre ellos secciones, columnas, widgets, columnas interiores y cuadrículas avanzadas. Este artículo repasa las unidades de tamaño disponibles en el panel de diseño y ofrece ejemplos prácticos de uso.

Además, el Editor 2.0 te permite configurar las unidades de tamaño desde el breakpoint principal (escritorio), lo que asegura la escalabilidad en todos los tamaños de pantalla. Puedes ajustar las unidades de tamaño en los breakpoints de tablet y móvil sin que afecte a los demás. Para más información, consulta «Screen Sizes and Devices».

Porcentaje (%) para un escalado flexible y proporcional

El porcentaje (%) es una unidad de tamaño dinámica que determina qué proporción del contenedor (sección, columna, columna interior o cuadrícula avanzada) ocupa el elemento en los distintos tamaños de pantalla. Por lo general, el ancho de los elementos flex se expresa en porcentajes de forma predeterminada. Conviene usar porcentajes cuando quieres mantener un diseño coherente entre tamaños de pantalla sin tener que ajustar los píxeles a mano en cada breakpoint.

Por ejemplo, si pones las dos columnas de un diseño de dos columnas al 50% de ancho, se escalan automáticamente al 50% en todos los tamaños de pantalla.

Los porcentajes son útiles para conservar los tamaños relativos de los elementos en distintas dimensiones de pantalla. Es decir, los elementos se escalan de forma proporcional a su contenedor principal (sección o columna), lo que garantiza una apariencia uniforme del diseño.

Por ejemplo, una imagen con un ancho del 50% dentro de una columna siempre ocupará la mitad del ancho de esa columna, sea cual sea el tamaño de pantalla. Así, aunque la columna y la imagen se vean más estrechas en móvil que en escritorio, la imagen conserva su ancho proporcional. Del mismo modo, poner el padding entre columnas al 4% asegura un espaciado coherente respecto a las columnas y a los demás elementos de la pantalla, y se adapta a los distintos tamaños.

Píxeles (px) para dimensiones fijas y estables

Los píxeles (px) son una unidad de medida fija a la que no le afectan las variaciones de tamaño de los dispositivos. Por ejemplo, un botón fijado en 250px mantiene su tamaño en móvil, tablet y escritorio.

Ahora bien, usar solo píxeles para el tamaño puede dificultar la adaptabilidad y obligarte a ajustes manuales en cada breakpoint. Por eso, aunque los píxeles garantizan un tamaño constante, es preferible usar porcentajes para favorecer un diseño responsivo. Así reduces los ajustes de píxeles uno a uno en cada breakpoint, agilizas el proceso de diseño y mejoras la adaptabilidad general.

Ancho de ventana gráfica (vw) para un escalado responsivo según el ancho de la pantalla

El ancho de ventana gráfica (vw) ajusta los elementos de forma dinámica según el ancho de la pantalla (viewport), lo que asegura un escalado proporcional en distintos dispositivos. Por ejemplo, asignar 50 vw a un elemento le reserva la mitad del ancho de la pantalla.

Alto de ventana gráfica (vh) para un escalado responsivo según el alto de la pantalla

El alto de ventana gráfica (vh) escala los elementos de forma dinámica en relación con el alto de la pantalla (viewport). Por ejemplo, asignar 25 vh a un elemento le reserva un cuarto del alto de la pantalla. Resulta especialmente útil para fondos a pantalla completa (100% vh) o para elementos que necesitan sincronizarse con el alto de la pantalla.

Automático (A) para una adaptación según el contenido

La unidad automática se ajusta de forma dinámica según la altura del contenido, por lo que es adecuada para los bloques de texto y las alturas de columna: hace que cambien de tamaño en función de su contenido. Por lo general, los bloques de texto usan unidades automáticas de forma predeterminada. Así los elementos se expanden o se contraen sin problemas y el diseño mantiene sus proporciones.

Entender el concepto de padre e hijo en los elementos anidados

El concepto de padre e hijo rige cómo se organizan los elementos: los elementos principales, como headers, bodies, menús y footers, contienen al menos una sección. Cada sección, a su vez, alberga al menos una columna, que sirve de contenedor para distintos elementos, como texto, imágenes o widgets como las columnas interiores y las cuadrículas avanzadas.

Los elementos padre conservan sus ajustes de diseño, lo que permite controlar su apariencia de forma centralizada. Ahora bien, si una sección dentro de un elemento padre tiene ajustes propios de color de fondo, puede que el fondo del elemento padre no refleje esa personalización. Esta estructura jerárquica aporta un enfoque sistemático a la organización del sitio, facilita flujos de trabajo de diseño eficientes y da coherencia a la presentación del contenido.

Seleccionar y navegar por los elementos flex en el canvas

La jerarquía de los elementos sigue una estructura predeterminada: las secciones contienen columnas y las columnas contienen widgets. Por esta disposición, no puedes añadir un widget directamente a una sección sin que esté anidado dentro de una columna. Hay varias formas de seleccionar un elemento (sección, columna o widget):

• Selección directa de objetos en el editor canvas: puedes interactuar directamente con los elementos del editor canvas, lo que facilita identificar y modificar componentes concretos sin tener que navegar mucho por paneles o menús. Al seleccionar un objeto, el panel de diseño con todas las opciones de diseño de ese elemento aparece a la derecha.
• Migas de pan del menú flotante: puedes volver a los contenedores padre usando las migas de pan del menú flotante. Al seleccionar un elemento concreto, basta con hacer clic en las migas de pan azules de la parte superior del elemento para volver a su contenedor padre.
• Migas de pan en la parte superior del panel de diseño: el panel de diseño también incluye opciones de navegación en la parte superior en forma de migas de pan. Con ellas puedes saltar rápidamente entre distintas secciones o elementos del canvas.
• Panel de capas: al seleccionar un elemento, el panel de capas resalta las capas asociadas a ese elemento. Al mismo tiempo, el editor te da una respuesta visual que ayuda a navegar por el canvas.

Secciones flex

Las secciones flex son filas con dos columnas flex predeterminadas que forman un diseño básico. Una vez añadida una sección, puedes añadir, quitar o reorganizar columnas, columnas interiores o cuadrículas avanzadas para crear el diseño que quieras. Después, añades widgets a ese diseño.

Añadir una sección flex

Para añadir una sección:

1. Pasa el ratón entre dos filas y haz clic en Añadir sección. O bien, haz clic con el botón derecho para abrir el menú contextual, haz clic en Añadir y elige Flex section.
2. En el panel lateral, haz clic en Secciones Flex.
3. Elige la sección flex que quieras.
4. Haz clic en Guardar.

Nota: la opción de mantener una imagen de fondo estática no está disponible en tablet ni en móvil por una limitación de iOS.

Guardar una sección flex

Para guardar una sección:

1. Pasa el ratón por la sección que quieras y haz clic en Flex Section, en la esquina superior izquierda de la sección.
2. Haz clic en Guardar como sección y luego en Selecciona solo esta fila.
3. Escribe un nombre para la sección, elige la categoría en la que se guardará y define sus permisos.
4. Haz clic en Empezar a crear.
5. Haz clic en Hecho.

Eliminar una sección flex

Para eliminar una sección, haz clic con el botón derecho para abrir el menú contextual y elige Suprimir. O bien, haz clic en el icono de eliminar del menú flotante.

Columnas flex

Una vez añadida una sección a tu sitio, puedes añadir columnas para que contengan widgets dentro de la sección. Todas las secciones contienen columnas de forma predeterminada, pero aun así puedes añadir más.

Ten en cuenta que el número máximo de columnas es 8.

Nota: cuando añades un elemento a una columna, su posición la determinan los ajustes de disposición automática. Para cambiar la dirección de la disposición automática, abre el panel de diseño y, en la sección Diseño, elige horizontal o vertical.

Añadir una columna flex

Para añadir una columna:

1. Haz clic para seleccionar una columna existente.
2. En el menú flotante, haz clic en el icono de tres puntos horizontales y elige Añadir columna. O bien, haz clic en el icono más del borde izquierdo o derecho de la columna.

Duplicar una columna flex

Puedes duplicar una columna, y se añade a la derecha de la original. No puedes añadir columnas que superen el 100% del ancho.

Para duplicar una columna:

1. Haz clic para seleccionar una columna.
2. En el menú flotante, haz clic en el icono Duplicar. O bien, haz clic con el botón derecho en la columna para abrir el menú contextual y elige Duplicar.

Eliminar una columna flex

Puedes eliminar una columna para quitarla de la sección. Ahora bien, cada sección debe tener al menos una columna, así que no puedes eliminar la última columna de una sección.

Para eliminar una columna:

1. Haz clic para seleccionar la columna.
2. En el menú flotante, haz clic en el icono Suprimir. O bien, haz clic con el botón derecho en la columna para abrir el menú contextual y elige Suprimir.

Añadir widgets en flex

Puedes añadir widgets a columnas, columnas interiores o cuadrículas avanzadas de varias formas. Si ya estás en el modo flex, puedes añadirlos directamente desde el panel lateral: haz clic en Widgets y elige el widget que quieras.

Nota: si usas el modo flex en el Classic Editor, no puedes arrastrar y soltar un widget en una columna flex desde el panel lateral.

Para añadir un widget:

1. Haz clic en una columna, una columna interior o una cuadrícula avanzada para seleccionarla.
2. Haz clic en el icono más del centro de la columna, la columna interior o la cuadrícula avanzada. O bien, haz clic en el icono más del menú flotante.
3. Elige un widget.

También puedes añadir widgets desde el panel de capas.

Para añadir un widget desde el panel de capas:

1. Haz clic para seleccionar una columna.
2. En el panel lateral, haz clic en Capas.
3. En el panel de capas, pasa el ratón por la columna, la columna interior o la cuadrícula avanzada a la que quieres añadir un widget y haz clic en el icono más.
4. Elige un widget.

Alineación y espaciado en flex

Puedes combinar la alineación y el espaciado para conseguir tus diseños.

Alinear varios elementos

Al diseñar con flex, ahorras tiempo alineando varios elementos a la vez dentro de la misma sección, columna o columna interior.

Para alinear varios elementos:

1. Selecciona la sección, la columna o la columna interior y haz clic en el icono de alineación del menú flotante.
2. Elige la alineación que quieras.

El panel de diseño ofrece opciones de alineación adicionales, como cambiar la dirección de la disposición automática, estirar los elementos y más.

Para alinear elementos desde el panel de diseño:

1. Haz clic con el botón derecho en la sección, la columna o la columna interior que quieras y elige Editar diseño.
2. En la sección Diseño del panel de diseño, dentro de Alineación del contenido, elige la alineación vertical y horizontal que quieras.

Al alinear texto desde el menú flotante o el panel de diseño, se alinean tanto el texto como la etiqueta div.

Alinear un solo elemento

Aunque se pueden alinear varios elementos a la vez, a veces solo necesitas cambiar la alineación de un elemento dentro de una columna flex sin afectar a los demás.

Para alinear un solo elemento:

1. Selecciona el elemento que quieras.
2. En el menú flotante, haz clic en el icono de alineación y elige la alineación que quieras. O bien, haz clic con el botón derecho en el elemento y elige Editar diseño. Se abre el panel de diseño, donde puedes elegir la alineación en la sección Alinear.

Espacio entre elementos

Puedes definir cuánto espacio horizontal o vertical hay entre columnas de la misma sección flex, o entre widgets dentro de una columna, una columna interior o una cuadrícula avanzada.

Para definir el espacio entre elementos:

1. Haz clic con el botón derecho en la sección, la columna, la columna interior o la cuadrícula avanzada que quieras y elige Editar diseño.
2. En la sección Espaciado del panel de diseño, dentro de Espaciado entre elementos, escribe el valor o usa el control deslizante para definir el porcentaje de espacio horizontal o el valor en píxeles de espacio vertical que quieres entre los elementos, en el campo Spacing between items.

Puedes restablecer el padding tanto de las secciones como de las columnas haciendo clic en el icono Restablecer el fondo predeterminado del menú flotante.

Crear elementos superpuestos en flex

Las secciones flex crean un diseño y alinean los objetos automáticamente, lo que te ayuda a diseñar secciones atractivas de forma rápida y sencilla. Ahora bien, cuando tienes un diseño más complejo con objetos superpuestos o una composición libre, necesitas una cuadrícula avanzada. Las cuadrículas avanzadas te permiten colocar los elementos en una composición libre, sin disposición automática. Por eso, te recomendamos comprobar tu diseño en todos los breakpoints.

Para crear elementos superpuestos:

1. Haz clic para seleccionar una columna flex.
2. En el menú flotante o en la columna flex, haz clic en el icono más.
3. En la sección de elementos flex, elige Advanced grid (antes llamado containers). Para seguir las buenas prácticas, arrastra los bordes de la cuadrícula avanzada hasta que ocupe todo el ancho de la columna flex.
4. En la sección Diseño del panel de diseño, elige una cuadrícula ya hecha en Reorganizar diseño. Si prefieres crear la tuya, usa los menús desplegables Columnas y Filas de Personalizar el diseño para añadir columnas o filas.
5. En el menú flotante, haz clic en el icono más, elige los widgets que quieras y colócalos en la cuadrícula avanzada.
6. Haz clic para seleccionar un elemento y, en la sección Organizar del panel de diseño, elige Llevar al frente, Llevar adelante, Enviar hacia atrás o Enviar al fondo.

Cuando uses cuadrículas avanzadas, te recomendamos comprobar tu diseño en cada breakpoint. Con elementos superpuestos, puede que tengas que ajustar el diseño en algunos breakpoints.

Widgets Columna interior y Cuadrícula avanzada

En diseño web, elegir el sistema de diseño adecuado influye mucho en la experiencia de usuario, sobre todo al integrar en un sitio elementos de diseño como la columna interior y la cuadrícula avanzada.

El widget columna interior se recomienda para:

• Diseños modulares: perfectos para crear diseños modulares en los que el contenido fluye de forma lineal, ideales para menús de navegación, tarjetas o diseños tipo lista.
• Diseño responsivo: destaca al crear diseños responsivos que se adaptan sin problemas a distintos tamaños de pantalla y dispositivos, con una alineación y una legibilidad óptimas.
• Contenido dinámico: muy adecuado para manejar contenido dinámico que puede variar en longitud o tamaño, ya que permite controlar de forma dinámica el comportamiento y el tamaño de los elementos dentro de un contenedor.
• Diseños anidados: la capacidad de anidamiento de la columna interior la hace idónea para crear diseños anidados complejos. Puedes anidar más columnas interiores dentro del contenedor exterior según lo necesites, lo que aporta flexibilidad y adaptabilidad al organizar jerarquías de contenido. Del mismo modo, la cuadrícula avanzada permite anidar widgets, columnas interiores e incluso más cuadrículas avanzadas dentro de su estructura.

El widget cuadrícula avanzada se recomienda para:

• Estructuras de diseño complejas: imprescindible para crear diseños intrincados con varias filas y columnas, con un control preciso de la colocación y el tamaño de los elementos.
• Diseños no lineales: perfecta para diseños no lineales en los que los elementos deben colocarse con independencia de su orden de origen, para composiciones creativas y disposiciones asimétricas. Es decir, los elementos se pueden colocar y disponer según las necesidades del diseño.
• Diseño web responsivo: aunque requiere una planificación cuidadosa, la cuadrícula avanzada ofrece herramientas potentes para crear diseños responsivos. Puedes definir ajustes concretos del diseño, como reordenar columnas, hacer que los elementos abarquen varias celdas o modificar los espacios de la cuadrícula en distintos tamaños de ventana gráfica, para una presentación óptima en cada dispositivo.

¿Cuándo conviene usar un widget columna interior y cuándo un widget cuadrícula avanzada?

Las columnas interiores encajan mejor en diseños modulares, sobre todo cuando necesitas un control preciso de cada elemento dentro de una sección o quieres una disposición automática. Ten en cuenta, eso sí, que aunque las columnas interiores mantienen la integridad de la sección, mover widgets dentro de ellas es menos flexible que en las cuadrículas avanzadas.

Las columnas interiores permiten controlar filas o columnas por separado, ideales para diseños unidimensionales. Las cuadrículas avanzadas permiten manipular filas y columnas a la vez, con un control completo de toda la estructura del diseño, ideal para diseños bidimensionales.

La cuadrícula avanzada (CSS Grid) puede tener una ligera ventaja al manejar diseños complejos, ya que optimiza la estructura del DOM, la eficiencia de renderizado, la carga de recursos, la adaptabilidad y reduce las peticiones HTTP. Las columnas interiores, aunque eficaces, pueden implicar más elementos HTML anidados, lo que puede provocar tiempos de renderizado algo más lentos que las cuadrículas avanzadas.

También puedes usar el widget columna interior y el widget cuadrícula avanzada en la misma sección y por todo el sitio para lograr los diseños que quieras. Se trata de encontrar el equilibrio entre la estructura general del diseño y los detalles más finos de la organización del contenido.

Relaciones de padre e hijo entre elementos widget

Entender las relaciones de padre e hijo es fundamental para aprovechar bien las columnas interiores y las cuadrículas avanzadas. En estos sistemas de diseño, la columna que aloja los elementos actúa como padre, mientras que los elementos que hay dentro, como widgets adicionales, se consideran hijos. Esta relación determina cómo se colocan y se alinean los elementos dentro del diseño, lo que aporta coherencia e integridad estructural a tu diseño web.

Ten en cuenta que no siempre hace falta añadir columnas interiores. A menudo, una sola columna basta para muchos casos. La columna interior facilita colocar los elementos en horizontal o en vertical. Necesitas una sección que actúe como contenedor flex y una columna que aloje las columnas interiores; ambos tipos de columna funcionan como elementos flex y representan, respectivamente, el elemento padre y el hijo.

La cuadrícula avanzada permite colocar los elementos en dirección vertical y horizontal. Necesitas una sección que actúe como contenedor y una cuadrícula avanzada que declare el diseño de cuadrícula en el elemento padre o contenedor, con lo que todos sus hijos pasan a ser elementos de la cuadrícula.