Cuadrícula

-- Cuadrícula

La regla que puedes ver abajo respresenta la cuadrícula, esta contiene los números del uno al doce y cada número representa una columna. Para que la explicación quede clara, a cada ejemplo le asignaremos una regla y de esta forma sea mas fácil comprender cada uno de ellos.

-- La clase col (column)

La clase col marcará y creará la columna dentro de un contenedor o contenedores, esta clase contiene una serie de propiedades CSS que hacen de ella la principal pieza para el sistema de cuadrícula, de esta clase dependerá las filas de cada contenido dentro de un contenedor. Esta clase no crea los puntos de corte, (esto lo veremos más adelante), ya que la clase col debe de ir en conjunto con las clases que veremos para los puntos de corte.

Los ejemplos lo realizaremos dentro de un contenedor con la clase row.

    

        

            
col
        
        

            
col
        
        

            
col
        
    
            

Ejemplos

-- Primer ejemplo:

Hemos creado tres contenedores y cada uno de ellos marcado con la clase col; cada contenedor está ocupando cuatro columnas, obteniendo entre todo ellos un resultado de doce, y ocupando la cuadrícula al completo; 4 + 4 + 4 = 12.

-- Segundo ejemplo:

Estos cinco contenedores están dispuesto de la siguiente manera: Los dos superiores ocupando cada uno de ellos seis columnas, y los tres inferiores cuatro columnas cada uno; con lo que obtenemos el siguiente resultado:

Contenedores superiores 6 + 6 = 12.

Contenedores inferiores 4 + 4 + 4 = 12.

-- Tercer ejemplo:

En este tercer y último ejemplo veremos lo siguiente, en orden de izquierda a derecha: el primero ocupa ocho columnas y el segundo cuatro. Los contenedores inferiores en orden de izquierda a derecha ocupan las siguientes columnas: el primero tres; el segundo tres; el tercero seis. Con esto resolvemos lo siguiente:

Contenedores superiores 8 + 4 = 12.

Contenedores inferiores 3 + 3 + 6 = 12.

-- Puntos de corte en cuadrícula

Aquí será donde comenzaremos el siguiente paso para terminar de comprender y poder trabajar con este sistema que ofrece Genesis CSS, a continuación conocerás los puntos de corte sobre los que trabajarás. Estos puntos de corte los volverás a ver en otras secciones con la misma base de explicación pero adaptada a la sección la cual va dirigida. Generalizando, Los puntos de corte están tanto para máximo como para mínimos, es decir:

@media screen and (max-width: ...).

@media screen and (min-width: ...).

En esta sección nos vamos a referir a puntos de corte en mínimos que es como va atrabajar el sistema de cuadrícula. El orden en el que vamos a ir conociendo este bloque será:

• - Concepto de identificación por dispositivo (IPD).
• - Puntos de corte e IPD.
• - Aplicación de IPD y puntos de corte en columnas.

-- Concepto de Identificación por Dispositivo (IPD)

Cuando decimos IPD estamos definiendo la Identificación Por Dispositivos, esto sería cada clase que vamos a utilizar en el sistema de cuadrícula para crear la ruptura o punto de corte. Cada clase corresponde a un dispositivo y, la clase será el nombre del dispositivo abreviado, por ejemplo; la clase correspondiente a Phone sería pho. Cada una de estas clases podrás conocerlas en la tabla siguiente.

Ejemplos IPD

-- Aplicación de IPD y puntos de corte en columnas

¿Qué establece cada clase?.

Cada una de estas clases establece donde se producirá el corte para que el contenido de cada columna ocupe el 100% del contenedor con respecto a su width. En el ejemplo que verás abajo, se muestra un contenedor con clase row que a su vez contiene tres contenedores con clase col y cada uno tiene establecido el punto de corte en pha seguido de un número que en este caso es 4, este número está indicando cuantas columnas se va a ocupar en la cuadrícula.

Una vez se encuentren en el punto de corte establecido en pha pasarán a ocupar cada col las doce columnas de la cuadrícula que, a su vez cada uno quedará independiente del otro, quedando los tres en un solo bloque.

-- Segundo y último ejemplo IPD

Distintos puntos de corte en un mismo contedor

En este ejemplo que se muestra a continuación puedes ver como los dos contenedores superiores tienen los puntos de corte establecidos en tab, mientras los inferiores todos están establecidos en pha.

Cuando el contenedor principal (padre), marcado con la clase row se encuentre dentro del radio de los 990px, los contenedores marcados con la clase tab pasarán a ocupar el 100% con respecto a su width, ocupando cada uno de ellos las doce columnas de la cuadrícula, mientras que los contenedores marcados con la clase pha se mantendrán sin cambios hasta llegar a su punto de corte en 770px que será cuando ocupen las doce columnas de la cuadrícula.

-- Estableciendo clases por separado

- ¿Qué ocurre si establecemos la clase col sin establecer un punto de corte?.

Si se hace esto, col ocupará las doce columnas de la cuadrícula.

- ¿Qué ocurre si establecemos un punto de corte sin establecer la clase col?.

Haciendo esto, el punto de corte ocupará las cuadrículas de la columnas que tu desees y, a la vez formarán un solo bloque en columna, pero sin obtener las propiedades CSS que ofrece la clase col.

-- Resumen sobre la clase col e IPD

En esta sección hemos visto y entendido como utilizar el sistema de cuadrícula y que esta tiene clases fundamentales como son col (columna), y las clases que componen la identificación por dispositivos (IPD) que será el identficador de la ruptura o punto de corte y, a su vez estas, van acompañadas de una cifra del uno al doce para indicar cuantas columnas se ocuparán en la cuadrícula.

Auto fill

auto-fill es una utilidad que a diferencia de las anteriores conocida puede destacar por su facilidad de adaptación a los distintos dispositivos sin tener que establecer puntos de corte, ya que la misma viene diseñada para tal fin. Esta utilidad esta basada en grid layout.

auto-fill puede ser de gran utilidad para trabajar con tarjetas o presentar un catálogo de imágenes... entre otras muchas opciones. Tienes que saber que tienen un width definido y por lo tanto no sería conveniente por ejemplo insertar contenedores con medidas fijas. Conoce los diferentes tipos de esta utilidad...

Ejemplo de uso

    

        
...
        
...
        
...
    
        

Puedes ver un ejemplo en Tarjetas > utilidad : auto-fill.