Oxygenados La comunidad hispana
Recoda White Full Logo
Patrocinador
post oxygen builderOxigenados Tip del dia
Características
A  Fondo
Roadmap
Feedback
ChangelogWorkspaceFacebookDiscordComprar

Guia Grid

Inicio

Antes de sumergirnos en todas las opciones que podemos utilizar, vamos a entender los términos Desplazamiento, Canalización y Ancho máximo. En la imagen de abajo se puede ver lo que estas opciones van a cambiar en la superposición de la cuadrícula

recoda guia grid

Ahora entendemos los términos, así que vamos a sumergirnos en todas las opciones que podemos personalizar. Todas las opciones se indican en la tabla siguiente:

Propiedad

Variable CSS

Descripción

Gutter

--ws_gutter

Gap / Distancia
 entre dos columnas(px, rem)

Offset

--ws_offset

Distancia mínima desde D/I borde de la pantalla al inicio/fin de la cuadrícula (px, rem)
** para pantalla completa poner en 0px

Max. width

--ws_max_width

Gap/Distancia entre dos columnas(px, rem)

Columns

--ws_columns

Gap/Distancia entre dos columnas(px, rem)

Color

--ws_color

Gap/Distancia entre dos columnas(px, rem)

En la Tabla 1 podemos ver cinco propiedades y qué variables CSS debemos utilizar para ajustar la superposición de la rejilla a nuestro gusto.

Personalizar la superposición de la cuadrícula

Antes de crear la configuración debemos:
 1 -  Hacer click en Stylesheets.
 2 - Crear una nueva Stylesheet con el nombre, por ejemplo, Grid overlay.
 3 - Abrir la nueva Stylesheet creada.

Punto de ruptura por defecto

Para el estilo por defecto (tamaño máximo de la pantalla) utiliza el boilerplate 1.
Aquí debes definir los cinco valores. 
Más tarde cambiamos sólo los valores que queremos que cambien.
Si quieres una rejilla de ancho completo debes establecer el valor --ws_max_width a 100%, y si queremos una rejilla basada en un contenedor podemos establecer este valor al ancho de la página, por ejemplo, 1120px y esto asegurará el ancho máximo de la rejilla.
 Para mas detalles pasar por este TEMA