Extender el contenido a varias celdas en un diseño de cuadrícula

Los contenedores de cuadrícula son ideales para crear un diseño simétrico, pero pueden ser algo restrictivos. La función de extensión de contenido le brinda mayor flexibilidad con el diseño de cuadrícula, lo que permite que el contenido se extienda a través de varias celdas y le brinda la capacidad de crear diseños complejos dentro de una cuadrícula.

Extender el contenido a través de varias celdas

Extender el contenido a través de varias celdas le brinda mayor flexibilidad de diseño. Por ejemplo, puede crear una galería de imágenes con imágenes de varios tamaños.

Para extender el contenido a través de varias celdas:

1. Cree una cuadrícula. Para este ejemplo, crearemos una cuadrícula de 4 por 2.
   
    Para obtener más información, consulte Crear un contenedor de cuadrícula.
2. Arrastre un widget de imagen a la primera celda, la que está en la esquina superior izquierda. 
   
3. Añada contenido al widget. Para obtener más información, consulte Widget de imagen.
   
4. Haga clic en la pestaña Avanzado.
   
5. En el panel, en la sección Elemento de cuadrícula, utilice el menú desplegable Extensión de columna para seleccionar 2.
   
   Note

   Cuando cambiamos la Extensión de columna, afectó la altura de la celda. Como puede ver si mira la celda vacía, este cambio afecta a todas las celdas de la cuadrícula porque todas las celdas de una cuadrícula tienen el mismo tamaño.
    
   
   
   
6. Utilice el menú desplegable Extensión de fila para seleccionar 2.
   El widget de imagen ocupa cuatro celdas.
   
   Note

   La imagen parece tener el mismo tamaño, sin embargo, ahora ocupa cuatro celdas en lugar de dos. Esto afecta el tamaño de las celdas como puede ver en la celda vacía.  
   
   
   
   
7. Arrastre un widget de imagen a la celda vacía y añada una imagen.
   
8. En la pestaña Avanzado de esta imagen, cambie la Extensión de columna a 2.
   Ahora, añadamos otra imagen y creemos un área en blanco en la galería. Normalmente, con una cuadrícula, no puede tener celdas en blanco, pero la extensión personalizada permite esto.
   
9. Añada otra imagen a la cuadrícula.
10. En la pestaña Avanzado, utilice el menú desplegable Extensión de columna para seleccionar Personalizado.
    
11. En el cuadro de texto, introduzca 4.

Esta configuración personalizada significa que la imagen comenzará en la cuarta línea vertical o al final de la segunda columna. Consulte a continuación para obtener más información sobre la configuración personalizada.

Usar el campo personalizado

Los menús desplegables Extensión de columna y Extensión de fila contienen valores numéricos, así como un campo Personalizado. Al seleccionar Personalizado, puede controlar la extensión introduciendo código en lugar de seleccionar un número del menú desplegable.

Si desea utilizar el campo Personalizado: 

1. Cree un contenedor de cuadrícula y añada un widget. 
   

2. Vaya a la pestaña Avanzado del widget seleccionado.
   
3. Utilizando el menú desplegable Extensión de columna o el menú desplegable Extensión de fila, seleccione Personalizado.
   
4. Utilice el cuadro de texto para introducir código para extender el widget.

Ejemplos de código personalizado para extender widgets:

• Extensión 2: Extender a través de 2 filas o columnas.
  
  Note

  En los códigos a continuación, los números se refieren a las líneas que bordean los contenedores (consulte el cuadro a continuación como referencia).
• 1 / 3: Extender desde la primera línea hasta la tercera línea. 
• 2 / 5: Extender desde la segunda línea hasta la quinta línea. 

Los códigos personalizados le brindan mayor flexibilidad, lo que le permite crear diseños que no serían posibles utilizando los números estándar en el menú desplegable.