Grid
La grilla de la biblioteca es la herramienta mas importante del alineamiento de los elementos
dentro del DOM, junto con Flexbox y la capacidad de ajustar el Margin y el Padding, la grilla permite
el reacomodamiento automático de los elementos en todos los tamaños de pantalla sin salirse del diseño
y mostrando el contenido de manera correcta.
Grid Row-Fila
Es necesario para definir la grilla disponer de un contenedor dividido en doce partes iguales, de manera
tal que cada un de los elementos internos ocupen un conjunto de columnas definidas por el usuario de la grilla.
1
2
3
4
5
6
7
8
9
10
11
12
Cada columna está representada en el ejemplo anterior por un número y la clase
para definar la grilla es .row / .fila
1
2
3
4
5
6
7
8
9
10
11
12
En este caso se define la clase .cl-1 lo que implica
que cada elemento va a ocupar 1 columna en todos los tamaños de pantalla sin importar el tamaño.
Varias Columnas
La forma de que un elemento ocupe varias clolumnas lo definimos con el parámetro que acompaña a la
clase cl-[n] donde n es el numero de columnas que ocupa cada elemento.
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
Como se puede observar en el ejemplo cada elemento ocupa 3 columnas, por esta razón
hay 4 elementos por fila lo que se deduce a partir de la siguiente expresión
12 Columnas / 3 Columnas = 4 elementos por fila.
Que sucede si queremos que ocupe 4 columnas y que existan solo 3 elementos por fila.
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
Tamaños de Pantalla
En los ejemplos anteriores definimos la grilla junto con lo que ocupa cada elemento
en la misma para todos los tamaños de pantalla, lo que implica que si definimos una cantida fija
de columnas esta se mantendra constante en cada dispositivo sin importar su tamaño.
Ahora bien, que sucede cuando queremos definir que un elemento ocupe n columnas en los dispositivos
mayores 1030px de pantalla y m columnas para dispositivos de pantalla mas pequeña.
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
Como se puede observar en el ejemplo anterior se añadió a cada elemento la clase
cm-[n] lo cual implica que en dispositivos menores
a 1030px de ancho la cantidad de columnas asignadas a cada elemento va a ser de 6, por lo tanto la configuración de elementos
se presenta a partir de la siguiente expresión:
12 Columnas / 4 Columnas = 3 y 12 Columnas / 6 Columnas = 2 esto
quiere decir que en dispositivos grandes (mayores a 1030px) la cantidad de columnas de cada elemento va a ser de 3, mientras que en dispositivos
menosres a 1030px va a ser de 2.
| Clase |
Descripción |
Rango |
| .cl-[n] |
Cantidad de columnas que ocupa un elemento en dispositivos
mayores a 1030px
|
n = 1-12 |
| .cm-[n] |
Cantidad de columnas que ocupa un elemento en dispositivos
menores a 1030px
|
n = 1-12 |
| .cs-[n] |
Cantidad de columnas que ocupa un elemento en dispositivos
menores a 770px
|
n = 1-12 |
| .cxs-[n] |
Cantidad de columnas que ocupa un elemento en dispositivos
menores a 400px
|
n = 1-12 |
Ejemplo Completo
Ahora definimos un ejemplo en el que los elementos en los dispositivos mayores a 1030px
ocuparán 3 columnas, en dispositivos medianos menores a 1030px ocuparán 4 columnas, en dispositivos chicos
ocuparán 6 columnas y en dispositivos extra chicos menores a 400px ocuparan 12 columnas (100% de la grilla).
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
Grid Offset
En los ejemplos anteriores cada elementos ocupaba un conjunto de
columnas predefinido para cada tamaño de pantalla, pero en algunas oportunidades
es necesario definir para cada elemento un cojunto de columnas manualmente de manera tal
que cada elemento tenga una configuración diferente a la de los otros elementos.
Para esta tarea se utiliza la clase .offset-[tamaño]-[inicio]-[n] donde
inicio es la columna donde comienza el elemento, n es la cantidad de columnas que ocupa y tamaño (l,m,s,xs) es
el tamaño de la pantalla en la que se debe mostrar el elemento.
Que ocurre cuando queremos que a partir de los dispositivos medianos el elemento 1 ocupe
5 columnas pero que en los dispositivos grandes ocupe solo 3.
Lo mismo sucede a la inversa, por ejemplo: Queremos que el elemento uno en disposivos grandes
ocupe 5 columnas comenzando de la 2, pero en los demas dispositovos solo ocupe una cantidad de
columnas igual que los demás comenzando de la columna 1.
Como se puede observar en el ejemplo anterior ahora el elemento 1 ocupa 5 columnas
en dispositivos grandes (Mayores a 1030px) y en los demás dispositivos solo ocupa 4.
La columna 1 para equipos grandes queda desocupada.
Cuando tenemos elementos que son de distintas dimensiones y es necesario un ajuste manual
de como van a quedar dispuestos en la grilla es necesario utilizar el offset.
| Clase |
Medida |
Descripción |
| offset-l-[inicio]-[n] |
X > 1030px |
Desde [columna inicio] aplica un desplazamiento de n columnas. |
| offset-m-[inicio]-[n] |
770px < X < 1030px |
Desde [columna inicio] aplica un desplazamiento de n columnas. |
| offset-s-[inicio]-[n] |
400px < X < 770px |
Desde [columna inicio] aplica un desplazamiento de n columnas. |
| offset-xs-[inicio]-[n] |
400px > X |
Desde [columna inicio] aplica un desplazamiento de n columnas. |