Sistema de Grid
Last updated
Was this helpful?
Last updated
Was this helpful?
Un sistema de grid o rejilla, nos permite disponer los elementos de una pƔgina y que estƩn alineados. Va a existir una rejilla imaginaria de filas y columnas, a partir de la cual vamos a colocar los elementos de nuestra web. El uso de un sistema de grid tiene sentido si acompaƱa un diseƱo que usa tambiƩn una rejilla.
Un sistema de grid nos sirve para posicionar los elementos de la pĆ”gina alineados. Se usa en un montĆ³n de webs, por ejemplo, este ejemplo de Google.
Podemos ver que los elementos estƔn dispuestos en filas y columnas. Hay 4 columnas que se ven claramente, con un elemento que se expande en 2. Aunque a simple vista parecen no estar alineados en filas, todas las cajas tienen una altura proporcional a una base.
Vamos a ver 2 herramientas que nos facilitan crear una composiciĆ³n basada en grid: CSS grid y Bootstrap.
CSS grid es una nueva caracterĆstica de CSS que permite tener un sistema de grid de forma nativa en CSS. Es una herramienta compleja, asĆ que vamos a ver las bases de cĆ³mo poder usarla.
En primer lugar, existen 2 tipos de elementos, el contenedor del grid y los elementos del grid. En este sentido, es similar a algo que ya conocemos: flexbox.
En este grid vamos a tener 4 columnas, cada una de tamaƱo 1fr, que es una medida sobre el espacio disponible (free space). Por tanto, se divide el espacio disponible en 4 partes para las columnas. Para las filas, tendremos 3 de 40, 200 y 40px respectivamente.
A continuaciĆ³n, indicaremos a los elementos si queremos que ocupen una o varias filas o columnas con las propiedades grid-column y grid-row.
Esto indica que se expande desde la primera lĆnea de grid hasta la cuarta, es decir, ocupa las 3 primeras columnas.
NOTA: si tenemos 4 columnas, tendremos 5 lĆneas de grid. Es decir, siempre vamos a tener una mĆ”s que el nĆŗmero de filas o columnas.
Podemos escribir lo anterior de una forma simplificada:
Para las filas funciona exactamente igual:
TambiƩn podemos indicar el tamaƱo del espaciado de elementos en el contenedor con la propiedad grid-gap. Podemos indicar 2 valores si queremos espaciado distinto entre filas y columnas.
Partiendo del ejemplo de codepen, conseguid una composiciĆ³n como la de la imagen.
A la hora de posicionar los elementos en el grid, tambiĆ©n podemos usar la palabra span para indicar cuĆ”nto se expande desde la fila/columna actual. Por ejemplo, para el item1 que se expandĆa desde la lĆnea de grid 1 a la 4 podrĆamos usar:
Vamos a modificar el ejercicio anterior para usar span en vez de punto inicial y final.
Vamos a crear un grid de 12 columnas y 3 filas, la primera y la Ćŗltima ocupan el 20% del alto del viewport. Crearemos la composiciĆ³n de la imagen.
Hasta ahora hemos definido una rejilla fija donde colocar nuestros elementos pero ĀæQuĆ© pasa cuando hay mĆ”s elementos que "huecos"?
ĀæQuĆ© ha pasado con los tres Ćŗltimos elementos? Pues que se ha hecho lo que se ha podido.
Pero tenemos una forma de decirle a nuestro grid cĆ³mo comportarse cuando haya mĆ”s elementos de la cuenta, gracias a grid-auto-rows y grid-auto-columns, funcionan como grid-template-rows/columns pero solo se aplica en el caso de que haya mĆ”s elementos de la cuenta.
Y lo podemos usar junto con grid-auto-flow, que fuerza una Ćŗnica direcciĆ³n (columna o fila) para nuestra rejilla :)
Con estas propiedades ya podemos empezar a controlar un poco el comportamiento de nuestra rellija. Para completar un poco esta introducciĆ³n a grid faltarĆa ver la posibilidad de definir Ć”reas con nombres mĆ”s cercanos al humano:
El grid que hay debajo es de 2x3, y para definirlo usarĆamos:
pero si queremos "nombrar los espacios" podemos usar, ademƔs, grid-template-areas:
De esta manera creamos un Ɣrea completa asignando a dos el mismo nombre, como el header o el footer.
Si ahora quisiĆ©semos que un elemento en concreto se colocase en una de estas Ć”reas, solo tendrĆamos que decĆrselo:
Boostrap es una librerĆa de grid (solo columnas) y componentes grĆ”ficos que creĆ³ uno de los desarrolladores de Twitter. La librerĆa ofrece un montĆ³n de funcionalidades, desde elementos de UI (botones, dropdowns, menĆŗs, etc.), hasta componentes interactivos con JavaScript como un carrusel de fotografĆas.
A diferencia de otros temas, con Bootstrap os vamos a contar solo una pequeƱa introducciĆ³n y vais a tener que enfrentaros con algo muy comĆŗn como es usar una herramienta nueva y tener que revisar la documentaciĆ³n ;)
Para poder usarlo en nuestro proyecto, enlazaremos los CSS alojado en un servidor de Internet, lo que suele llamarse CDN (como hemos hecho con las fuentes de Google Fonts o con FontAwesome)
Alternativamente podrĆamos descargar el cĆ³digo CSS y usarlo en nuestro proyecto.
Por ahora vamos a ver que Bootstrap cuenta con un sistema de grid sencillo de 12 columnas.
Nota: Lo llamamos sistema de grid pero solo dispone las columnas.
Siempre partimos de la base de 12 columnas para distribuir el espacio disponible en la web. En el CSS que hemos importado, tenemos una serie de clases que nos van a permitir construir nuestra web con un grid responsive de acuerdo a unos breakpoints que bootstrap tiene definidos.
Como base usaremos un elemento container que contiene nuestro grid (como el wrapper de CSS grid) o container-fluid si queremos que ocupe todo el ancho y sea fluido. Luego usaremos un elemento con la clase row para indicar que es una nueva fila, y dentro podremos los elementos correspondientes. En cada fila podremos indicar el nĆŗmero de columnas a usar con las clases col-num, por ejemplo, col-1, col-6, col-12. Veamos un ejemplo.
Vamos a crear la composiciĆ³n del ejercicio 3 con Bootstrap para ver las diferencias de uso respecto a CSS grid.
Con Bootstrap, vamos a crear la tĆpica distribuciĆ³n de columnas que se usa para mostrar cĆ³mo funciona un grid:
Con suficientes divs (las cajas verdes) vamos a mostrar las columnas y opciones que nos ofrece bootstrap: 1. 12 columnas 2. 6 columnas 3. 3 columnas 4. 2 columnas 5. 1 columnas
Responde a las siguiente preguntas:
ĀæCuĆ”les son los breakpoints que nos ofrece Bootstrap?
ĀæQuĆ© clase tendrĆ” un elemento que ocupe 2 columnas en el breakpoint Small?
ĀæQuĆ© clase tendrĆ” un elemento que ocupe 6 columnas en el breakpoint Large?
ĀæQuĆ© clase tendrĆ” un elemento que ocupe 11 columnas en el breakpoint Extra Small?
Vamos a acercarnos a algo mƔs real y probemos a usar los breakpoints de Bootstrap:
Los breakpoints que usaremos son Extra small, Medium y Large ;)
Ahora iremos a un paso mĆ”s y, vamos a crear una pĆ”gina simple que se ajuste a las siguiente guĆas:
Para comenzar, usaremos en el contenedor la propiedad display:grid y definiremos las filas y columnas de nuestro grid con grid-template. Vamos a ver un ejemplo que podƩis :
Como en muchas otras ocasiones el navegador va a intentar solucionarlo, en este caso va a intentar :
ĀæSeremos capaces de ? ;)
El soporte el navegadores de CSS grid aĆŗn no es completo pero a dĆa de hoy (octubre de 2018) es de . Para los casos en que aĆŗn no podamos usarlo, tenemos como alternativa usar flexbox o el sistema de grid que nos ofrece Bootstrap.
Por ahora vamos a usar el <link> que . Si sĆ³lo queremos usar el CSS usamos esto en nuestro head:
las imƔgenes de los gaticos estƔn en
Vamos a crear el layout para pĆ”ginas con las que habitualmente trabajaremos, usando CSS grid y/o el sistema de grid de Bootstrap. Para ello, proponemos replicar , donde replica layouts tĆpicos usando CSS grid. Realiza al menos el primer ejemplo "Large Image followed by articles" usando Sass y el sistema de grid que elijas.
