Editor X: usar cuadrículas
8 min de lectura
El Editor X está en proceso de transición hacia Wix Studio, nuestra nueva plataforma para agencias y freelancers.Más información sobre Wix Studio
Las cuadrículas CSS son una excelente manera de garantizar que los elementos estén organizados de manera estructurada. En el Editor X, cada contenedor y sección incluye una cuadrícula incorporada. Puedes elegir el número de filas y columnas que requiere tu composición y ajustar su tamaño en varias medidas diferentes.
En este artículo, aprende todo sobre cómo trabajar con cuadrículas en el Editor X:
¿Quieres más información?
Consulta nuestra lección sobre cuadrículas en la academia del Editor X (enlace en inglés).
Ajustar una cuadrícula existente
Cada sección y contenedor incluye una cuadrícula incorporada de 1x1 que puedes ajustar. Cambia a un estilo diferente con un solo clic o crea tu propia cuadrícula arrastrando las líneas sobre tu composición existente.
Para ajustar la cuadrícula:
- Haz clic en el contenedor o sección de la página correspondiente.
- Cambia la cuadrícula de una de las siguientes maneras:
Elegir un estilo
Personalizar la cuadrícula en el lienzo
.
Consejo:
También puedes agregar una sección con una cuadrícula incorporada, haciendo clic en el icono Agregar sección 
.
.Administrar una cuadrícula desde el Inspector profesional
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.
Para administrar una cuadrícula:
- Haz clic en la cuadrícula correspondiente.
- Haz clic en el icono del Inspector profesional
en la parte superior del Editor X. - Haz clic en la pestaña Estilo
y desplázate hacia abajo hasta Mostrar. - Elige qué acción deseas realizar:
- Elige un estilo diferente: haz clic en el menú desplegable Estilo para seleccionar un aspecto diferente que contenga el mismo número de celdas que la cuadrícula existente.
- Ajusta la cuadrícula manualmente: haz clic a continuación para aprender a hacer lo siguiente:
Agregar más columnas o filas
junto a Columnas o Filas.
junto a una columna o fila existente y selecciona una opción:
Cambiar el tamaño de las columnas o las filas
Editar el tamaño de los espacios
Eliminar una columna o una fila
Trabajar con breakpoints:
Al diseñar una cuadrícula, solo aparece en el breakpoint específico en el que estás trabajando. Debes crear una cuadrícula para todos y cada uno de los tamaños de pantalla para asegurarte de que la composición de los elementos sea impecable.
Ubicar elementos en una cuadrícula
Mientras agregas elementos y los colocas en la cuadrícula, hay varias herramientas para ayudarte a crear un estilo adaptativo:
Acoplar elementos:
Acoplar elementos a las líneas de cuadrícula garantiza que estén colocadas tal y como deseas. Cuando agregas un elemento a una celda de la cuadrícula, se acopla automáticamente a las líneas de cuadrícula verticales y horizontales más cercanas. Puedes ajustar el acoplamiento según sea necesario desde el Inspector profesional.
Mover elementos a una celda de cuadrícula diferente
En la sección Posición en el Inspector profesional, puedes seleccionar un elemento y ver las celdas de la cuadrícula en las 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.
Estirar elementos para rellenar una celda de la cuadrícula
Estira los elementos para rellenar una celda de la cuadrícula con solo un clic. Si un elemento se coloca sobre las líneas de cuadrícula de más de una celda, se estira sobre todas las celdas en las que se ubica.
Tabla de unidades de cuadrícula
Utiliza toda la gama de unidades CSS para crear una cuadrícula. Puedes establecer el tamaño de las columnas y las filas con porcentajes, píxeles o fracciones. También puedes establecer el tamaño mínimo y máximo de las columnas y las filas, e incluso usar cálculos para crear la cuadrícula que necesitas.
Nota:
Puedes establecer el tamaño de las filas y las columnas en diferentes unidades. De forma predeterminada, las unidades para las filas están en píxeles; y las unidades para las columnas están, en fracciones (fr).
Unidad | Tipo de unidad | Explicación |
|---|---|---|
Fracción (fr) | Fluido | Establece el tamaño de las columnas/filas para que sea una fracción del tamaño del contenedor/sección de la página. P. ej., en una cuadrícula de 2 columnas, si la columna izquierda está configurada en 2 fr y la derecha en 1 fr, la columna izquierda ocupará 2/3 de la sección/contenedor. |
Auto | Fluido | La altura y el ancho de las filas y de las columnas se establecen automáticamente para que se ajusten al contenido dentro de ellas. |
Porcentaje (%) | Fluido | Establece el tamaño de las columnas/filas para que sea un porcentaje del contenedor/sección. |
Píxeles (px) | Fijo | Establece el tamaño de las columnas/filas para que sea un número fijo de píxeles de pantalla del contenedor/sección. 1 px = 1/96 de 1 pulgada. |
Ancho de viewport (vw) | Viewport | Establece el tamaño de las columnas/filas para que sea un porcentaje del ancho de la ventana de visualización (el tamaño de la ventana del navegador). P. ej., si la ventana de visualización tiene 50 cm de ancho, 1 vw = 0,5 cm. |
Altura de viewport (vh) | Viewport | Establece el tamaño de las columnas/filas para que sea un porcentaje de la altura de la ventana de visualización (el tamaño de la ventana del navegador). P. ej., si la ventana de visualización tiene 50 cm de altura, 1 vh = 0,5 cm. |
Mín./Máx. | Otros | Establece el tamaño de las columnas/filas en una medida mínima y máxima. Puedes elegir alguna de las unidades de cuadrícula cuando usas la opción. |
Contenido mín. | Otros | Establece el tamaño de las columnas/filas para que nunca sea inferior a este contenido mínimo. |
Contenido máx. | Otros | Establece el tamaño de las columnas/filas para que nunca sea superior a este contenido máximo. |
Cálculo | Otros | Crea un cálculo con una de las unidades de cuadrícula para establecer el tamaño de las columnas/filas. |
¿Te ha sido útil?
|