Oxygenados La comunidad hispana
post oxygen builderOxigenadoa y Recoda

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