Editor de Wix Studio: trabajar con una cuadrícula CSS avanzada
8 min de lectura
En el Editor de Wix Studio, puedes usar una cuadrícula CSS avanzada para organizar el estilo de los elementos y las secciones. Puedes elegir el número de filas y columnas que deseas, y establecer su tamaño mediante medidas adaptativas (por ejemplo, fr, mín./máx., %).
En este artículo, aprende todo sobre cómo trabajar con una cuadrícula CSS:
Cambiar de una cuadrícula de sección a una cuadrícula CSS
Las secciones del Editor vienen con la opción de establecer una cuadrícula de sección. Esta es una versión fácil de usar de la cuadrícula avanzada, basada en la misma lógica CSS. Cambiar a una cuadrícula CSS avanzada te da un control más preciso del diseño por breakpoint.
Nota:
Una vez que realizas el cambio, no es posible volver a una cuadrícula de sección. Sin embargo, si acabas de realizar la acción, puedes usar el botón Deshacer 
en la parte superior derecha del Editor.
en la parte superior derecha del Editor.Para cambiar de una cuadrícula de sección a una cuadrícula CSS:
- Selecciona la sección correspondiente en el Editor.
- Haz clic en la flecha Abrir Inspector profesional
en la parte superior derecha del Editor. - Desplázate hacia abajo hasta Estilo.
- Haz clic en Aplicar junto a Cuadrícula CSS avanzada.
- Haz clic en Aplicar en la ventana emergente ¿Aplicar cuadrícula CSS avanzada?.
¿Cuál es el siguiente paso?
Personaliza las filas, las columnas y el espaciado desde el panel Inspector profesional. También puedes arrastrar las líneas de cuadrícula en el lienzo para moverlas.
Aplicar una cuadrícula CSS en otros elementos
Puedes aplicar cuadrículas CSS en contenedores, ventanas interactivas, flexboxes y repetidores. En los repetidores en concreto, una vez que aplicas una cuadrícula a un elemento, el resto se actualiza automáticamente.
Para aplicar una cuadrícula CSS:
- Selecciona el elemento correspondiente en el Editor.
- Haz clic en el icono Más acciones
. - Haz clic en Aplicar cuadrícula CSS avanzada.
- Elige un estilo en el menú desplegable de 1x1.
Consejo: Selecciona Otro si deseas establecer tu propio número de filas y columnas.
¿Cuál es el siguiente paso?
Personaliza las filas, las columnas y el espaciado desde el panel Inspector profesional. También puedes arrastrar las líneas de cuadrícula en el lienzo para moverlas.
Personalizar una cuadrícula CSS
Personaliza la cuadrícula para conseguir el estilo exacto que deseas. Puedes cambiar el número de filas y columnas, ajustar su tamaño y los espacios entre ellas.
Consejo:
Al diseñar una cuadrícula, solo se aplica al breakpoint específico en el que estás trabajando. Debes adaptar la cuadrícula a cada breakpoint para asegurarte de que la composición de tus elementos sea impecable.
Para personalizar una cuadrícula CSS:
- Selecciona el elemento o la sección correspondiente.
- Elige cómo quieres personalizar la cuadrícula:
Elige un estilo diferente
Agrega más filas y columnas
.
para ver esta opción. 
Cambia el tamaño de las columnas o las filas
Elimina una columna o una fila
junto a una columna o fila existente.
Edita el tamaño de los espacios
Posicionar elementos en una cuadrícula
Al agregar elementos a la cuadrícula, hay varias herramientas que te pueden ayudar a establecer su ubicación con mayor precisión.
Acoplamiento de elementos
Acoplar elementos a las cuadrículas garantiza que estén posicionadas exactamente como deseas. En el Editor de Wix Studio, todos los elementos se acoplan automáticamente, pero puedes ajustar el acoplamiento manualmente y agregar márgenes.
Mover elementos entre las celdas de la cuadrícula
En la sección Posición del Inspector profesional, puedes seleccionar un elemento y ver la celda de la cuadrícula en la que se encuentra. Haz clic en cualquier celda de la cuadrícula para mover el elemento allí, sin tener que usar la función de arrastrar y soltar.
También puedes ingresar los números específicos de columna y fila, lo cual resulta útil cuando necesitas colocar un elemento sobre varias celdas de la cuadrícula.
Tabla de unidades de la cuadrícula
Usa todo el rango de unidades de CSS para crear tu cuadrícula. Puedes establecer el tamaño de las columnas y filas mediante porcentajes, fracciones o píxeles. De manera alternativa, establece el tamaño mínimo y máximo de las columnas y filas, o usa cálculos para crear la cuadrícula que necesitas.
Porcentaje (%)
Fracción (fr)
Automático (Auto)
Píxeles (px)
Ancho y altura de la ventana gráfica (vw y vh)
Contenido mín. y máx.
Mín./máx.
Cálculo
¿Te ha sido útil?
|