Añade un diseño anidado.
Puedes poner una fila dentro de una columna para dividir esa columna de nuevo, como dos iconos lado a lado encima de un encabezado. Úsalo cuando una columna necesite una cuadrícula más fina que la fila que la rodea. El ejemplo añade una fila de dos iconos a la columna central de una fila de tres columnas. Para tu primera fila, empieza con Filas y columnas.
Añade un diseño anidado
- Añade una sección con una fila y columnas.
- Pasa el cursor sobre una columna y haz clic en + en su barra de Columna.
- En el selector de elementos, elige Fila en la pestaña Diseño.
- La fila anidada aparece dentro de la columna con columnas propias.
- Añade elementos a las columnas anidadas como siempre, por ejemplo un Icono en cada una.
- Haz clic en Guardar en la barra de herramientas para guardar la página.
Los elementos nuevos caen arriba de su columna, así que la fila anidada queda encima del texto de la columna.
Lo que ves
El lápiz y la estrella quedan lado a lado arriba de la columna central, encima del encabezado Diseño. Las columnas exteriores no cambian. En el editor, la fila anidada tiene sus propias barras de Fila y Columna, dentro de las de la fila exterior.
Section
Row (1/3 + 1/3 + 1/3)
Column
Text: Discovery
Column
Row (nested, 1/2 + 1/2)
Column
Icon: pencil
Column
Icon: star
Text: Design
Column
Text: Delivery
Configura tu diseño anidado
Una fila anidada tiene el mismo icono de cuadrícula y los mismos ajustes que cualquier fila; lee Filas y columnas. Sus anchos son partes de la columna madre, no de la página. Una columna de medio ancho que guarda una fila anidada de dos mitades te da dos áreas de un cuarto de ancho.
En pantallas de menos de 768 píxeles, las columnas anidadas se apilan igual que las exteriores. Dale a la fila anidada un diseño de teléfono con Añadir tamaño de pantalla si los iconos deben seguir lado a lado.
Profundidad máxima de anidamiento
Las filas se anidan tres niveles: una fila, una fila en una de sus columnas y una fila más dentro de esa. Un cuarto nivel se rechaza. El mismo límite vale para cada tipo de contenedor por su cuenta, como Pestañas dentro de Pestañas. Un tipo nunca cuenta para el límite de otro tipo.
Dos niveles cubren la mayoría de diseños. Cada nivel extra añade barras de control que hay que apuntar y estrecha el espacio para el contenido.
Patrones comunes de anidamiento
| Patrón | Cómo se crea |
|---|---|
| Cuadrícula de funciones | Una fila de tres columnas, cada una con una fila anidada: un icono junto a su texto |
| Bloques laterales | Una fila de 2/3 + 1/3 cuya columna estrecha guarda filas anidadas, una por bloque |
| Miembros del equipo | Una fila de dos columnas, cada una con una fila anidada de 1/3 + 2/3: un retrato junto a la bio |
Si no lo ves
- Un aviso dice que solo puedes anidar filas 3 niveles. La columna ya está dentro de dos filas anidadas, así que «Element cannot be added». Añade la fila a una columna de un nivel superior o usa un ajuste con más columnas en la fila exterior.
- La fila anidada queda encima del texto en lugar de debajo. Los elementos nuevos caen arriba de su columna. Abre Más en la barra de la fila anidada y elige Mover abajo.
- Los iconos se apilan en un teléfono. Las columnas anidadas se apilan por debajo de 768 píxeles, como todas las columnas. Haz clic en el icono de cuadrícula de la fila anidada, luego en Añadir tamaño de pantalla, y elige 1/2 + 1/2 para Extrapequeño (< 576px).
¿Qué sigue?
- Capas posicionadas: superpone elementos de formas que la cuadrícula no puede.
- Filas y columnas: ajustes de columna y un diseño por tamaño de pantalla.
- Pestañas: apila paneles de contenido en un sitio en lugar de lado a lado.