Es necesario ver este artículo en un navegador que soporte grid. Para entender y ver correctamente los ejemplos la resolución de pantalla debe ser mayor de 1000px. Deja el móvil, enciende el pc ;).
Grid es una pequeña revolución en css. La facilidad para distribuir elementos y la rápida adaptación que está teniendo entre los navegadores facilitará y mucho el trabajo en maquetación.
La web está llena de guías y recursos para aprender grid. Yo no aporto nada nuevo, pero escribir este tipo de artículos me facilita el aprendizaje. En cada propiedad tenéis un ejemplo de uso. Podéis inspeccionar el código para verlo más en detalle. Al final del artículo tenéis una serie de enlaces de interés para leer más sobre grid layout.
Propiedades para el grid contenedor
Creamos el grid con display:grid;
grid es un elemento de bloque mientras que inline-grid equivale a un inline-block.
display:grid;
1
2
3
4
5
6
7
8
9
10
11
display:inline-grid;
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
grid-template-columns | grid-template-rows
Una de las novedades que vienen con grid es la aparición de una nueva unidad de medida.
- El «fr»
- El fr es el espacio libre disponible. Así pues, si asignamos a tres columnas el tamaño 1fr estas se reparten el espacio libre por igual. Pero si tenemos dos columnas con valor 1fr y una con 2fr esta última obtiene el doble de espacio disponible que las dos primeras.
Con grid-template-columns y grid-template-rows se definen las columnas y las filas del grid. Podemos definir solo el tamaño (con medidas tanto relativas como absolutas) o definir el tamaño asociándolo a un nombre. Este nombre lo podremos usar posteriormente para posicionar los items.
En el ejemplo inferior vemos un grid con dos filas y tres columnas. Cada linea roja y negra equivale a un «track». Las celdas son los espacios en blanco que encontramos entre tracks. Por defecto grid tiene numerados implícitamente los tracks. En el ejemplo tenemos tres tracks horizontales y cuatro verticales. Nosotros mediante grid-template-columns y grid-template-rows podemos asignar un nombre a cada track utilizando los corchetes «[linea-uno]».
.container{
display: grid;
grid-template-columns: [col-inicio]150px [col-dos]150px [col-tres]150px [col-fin];
grid-template-rows:[linea-uno] 100px [linea-dos] 100px [linea-tres];
/*columnas y filas sin nombres explícitos*/
grid-template-columns:150px 150px 150px;
grid-template-rows: repeat(2, 100px);
}
Las cuatro declaraciones en code 1 son perfectamente válidas. Para entender el motivo de asignar un nombre a cada track tenemos que avanzar algunas propiedades de los elementos internos del grid ( llamémosles items ).
- grid-row-start y grid-row-end
- Definen desde que track empieza y acaba el item en el eje horizon
- grid-column-start y grid-column-end
- Definen desde que track empieza y acaba el item en el eje vertical
- grid-row y grid-column
- Son shorthands de grid-row-start | grid-row-end y grid-column-start | grid-column-end respectivamente.
Ya veremos con detalle cada propiedad. Pero viendo el código (code 2) podemos entender el funcionamiento de los tracks. En grid existe mas de un modo de posicionar los items, este es uno de ellos.
.container{
display: grid;
grid-template-rows:[linea-uno] 100px [linea-dos] 100px [linea-tres];
grid-template-columns: [col-inicio]150px [col-dos]150px [col-tres]150px [col-fin];
}
/*Utilizando los nombres asignados a los tracks */
.container__item-red{
grid-row-start: linea-dos;
grid-row-end: linea-tres;
grid-column-start: col-tres;
grid-column-end: col-fin;
}
/*Utilizando los nombres implícitos de los tracks */
.container__item-red{
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
}
/*Utilizando el shorthand con mobres asignados*/
.container__item-red{
grid-row: linea-dos / linea-tres;
grid-column: col-tres / col-fin;
}
/*Utilizando el shorthand con nombres implícitos*/
.container__item-red{
grid-row: 2 / 3;
grid-column: 3 / 4;
}
Podemos utilizar tanto los tracks implícitos como crear nuestro propio nombre, así como utilizar o no los shorthands. Combinando el grid-template-rows | grid-template-column con grid-row | grid-column ( o sus versiones específicas) podemos posicionar los items de forma similar al funcionamiento de flexbox con con la propiedad «order».
Ejemplo donde reposicionamos la celda roja 1
1
2
3
4
5
6
También podemos decidir cuantas celdas ocupará cada item.
Ejemplo donde se redimensiona la celda naranja 2
1
2
3
4
5
6
Para definir el tamaño de las filas o columnas podemos usar tanto
medidas absolutas como relativas. Una de las palabras clave
para no repetir código es repeat()
repeat()
Es un keyword para escribir de manera más compacta cuando tenemos múltiples filas y columnas.
.container{
grid-template-columns: repeat(3, 20px) 100px;
}
El selector en code 3 repite el tamaño de 20px para tres columnas y añade una cuarta de 100px.
auto-fill y auto-fit
Genera tantas columnas como quepan dentro del contenedor.
grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fit, 100px);
En code 4 podemos ver dos declaraciones. Ambas declaraciones crean tantas columnas de 100px como sea posible. No ponemos el número de columnas. Si el contenedor fuera de 1000px serían 10 columnas.
auto-fill
1
2
3
4
5
6
7
8
auto-fit
1
2
3
4
5
6
7
8
En un primer momento parece que no existen diferencias entre los ejemplos con auto-fill y auto-fit. Las diferencias se aprecian al usar otro de los keywords:
minmax()
Con minmax podemos asignar un tamaño mínimo y uno máximo a cada columna o fila.
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
Con estas declaraciones (code 5) creamos tantas columnas como quepan dentro del grid con un tamaño mínimo de 100px y máximo de 1fr ( Recordar que fr reparte el espacio sobrante).
auto-fill
1
2
3
4
5
6
7
8
auto-fit
1
2
3
4
5
6
7
8
Ahora si vemos la diferencia entre auto-fill y auto-fit ( Para apreciar las diferencias en el ejemplo necesitamos verlo con más de 1000px de ancho ). auto-fill genera las columnas y no utiliza el resto del espacio sobrante. Si no puede crear más columnas se detiene. Mientras que auto-fit utiliza todo el ancho del grid. Genera las columnas y entiende que hay espacio disponible. Por lo tanto reparte el espacio entre las columnas hasta rellenar el espacio total del grid.
grid-template–areas
Antes hemos visto como posicionar elementos con grid-template-rows | grid-template-columns y grid-row | grid-column .
El otro método disponible es grid-template-areas.
Con el definimos las áreas del grid. Creamos una rejilla con columnas y filas y
con grid-area asignamos a cada item del grid un nombre.
grid-template-areas:
"header header header"
"sidebar-left main sidebar-right"
"footer footer ." ;
/*un punto "." equivale a decir que una zona esta vacia*/
En esta declaración creamos tres columnas y tres filas. Header ocupará una fila, la segunda fila es para sidebar-left main y sidebar-right. La tercera fila es para footer, pero no ocupará todo la fila ya que el «.» representa una celda vacía. Ahora habría que darle tamaño a las filas y columnas con las propiedades grid-template-columns y grid-template-rows.
header
sidebar-left
main
sidebar-right
footer
Hay que recordar que esto solo funciona si los items tiene su zona asignada
con grid-area. Hasta ahora hemos creado los nombres de las
areas y colocado estos en la posición que queremos. Nos falta decirle a cada item
cual es su nombre.
.header{
grid-area: header;
}
.sidebar-left{
grid-area: sidebar-left;
}
.sidebar-right{
grid-area: sidebar-right;
}
.main{
grid-area: main;
}
.footer{
grid-area: footer;
}
Es tan sencillo como vemos en code 7. Tenemos que asignarle el area a cada elemento y estos se posición solos.
grid-template
Es un shorthand de grid-template-columns + grid-template-rows + grid-template-areas.
grid-template:"a a" 50px
"b c" 100px
"d d" 50px
/ 50px 200px;
/*equivale a las tres declaraciones juntas*/
grid-template-rows: 50px 100px 50px;
grid-template-columns: 50px 200px;
grid-template-areas: "a a"
"b c"
"d d";
a
b
c
d
En este ejemplo creamos un grid de tres filas y dos columnas. La barra inclinada «/» separa las propiedades de las filas y las columnas. El nombre de la areas esta entrecomillado «a a».
grid-column-gap | grid-row-gap | grid-gap
Determina el tamaño de las lineas del grid. Un equivalente es el «gutter» de photoshop para dejar un espacio entre columnas o filas.
.grid{
grid-row-gap: 15px; /*espaciado para las filas*/
grid-column-gap: 5px; /*espaciado en columnas*/
grid-gap: 15px 5px; /*shorthand primer valor filas segundo columnas*/
}
>code 91
2
3
4
5
6
7
8
9
10
justify-items | align-items
- justify-items
- Alinea el interior de los items del grid en el eje horizontal ( eje x). Soporta los valores [start | end | center | stretch] por defecto el valor es stretch
.grid{
justify-items: center;
align-items: center;
/*Centra los items en el eje vertical y horizontal*/
}
Stretch
2
3
4
Start
2
3
4
Center
2
3
4
End
2
3
4
- align-items
- Alinea el interior de los items del grid en el eje vertical (eje y). Soporta los valores [start | end | center | stretch] por defecto el valor es stretch
Stretch
2
3
4
Start
2
3
4
Center
2
3
4
End
2
3
4
justify-content | align-content
Mientras que justify-items y align-items alinean el interior del grid, justify-content y align content alinean al propio grid dentro del contenedor.
justify-content
- start :
- Alinea el grid con el inicio del contenedor.
start
2
3
4
5
6
7
8
9
- center :
- Centra el grid en el contenedor.
center
2
3
4
5
6
7
8
9
- end :
- Alinea el grid al final del contenedor.
end
2
3
4
5
6
7
8
9
- stretch :
- Amplia los elementos del grid para que ocupen todo el espacio del contenedor.
stretch
2
3
4
5
6
7
8
9
- space-around :
- Reparte el espacio del contenedor entre las columnas por igual. Realmente no poseen todas el mismo espacio libre, ya que la primera y la última columna no tienen una de las columnas a su lado y dejan de sumar ese espacio libre.
space-around
2
3
4
5
6
7
8
9
- space-between :
- Alinea la primera columna con el inicio del grid y la última columna con el final del grid. El resto de columnas se reparten el espacio por igual.
space-between
2
3
4
5
6
7
8
9
- space-evenly :
- A diferencia de space-around con space-evenly si conseguimos repartir el espacio por igual entre todas las columnas. Incluyendo tanto la primera como la última.
space-evenly
2
3
4
5
6
7
8
9
align-content
Igual que justify content pero en el eje vertical en lugar del horizontal.
- start :
- Alinea el grid con la parte superior del contenedor. (top)
start
2
3
4
5
6
7
8
9
- center :
- Alinea el grid en el centro del contenedor
center
2
3
4
5
6
7
8
9
- end :
- Alinea el grid en la parte inferior del contenedor (bottom)
end
2
3
4
5
6
7
8
9
- stretch :
- Redimensiona los items del grid para ocupar todo el espacio del contenedor.
stretch
2
3
4
5
6
7
8
9
- space-around :
- Como en justify-content. Reparte el espacio por igual entre las filas pero la primera y la ultima al no tener una de las filas a su lado obtiene menos espacio.
space-around
2
3
4
5
6
7
8
9
- space-between :
- Alinea la primera fila en «top» y la última en «bottom». el resto se reparten el espacio por igual.
space-between
2
3
4
5
6
7
8
9
- space-evenly :
- El espacio libre se reparte por igual en todas las filas. Independientemente de su posición.
space-evenly
2
3
4
5
6
7
8
9
grid-auto-columns | grid-auto-rows
Especifican el tamaño de las columnas y de las filas generadas en el grid de manera implícita.
El concepto de grid implícito parece algo difuso. En el caso de las filas y las columnas entendemos por implícitas todas aquellas filas o columnas que no están declaradas en el grid. Mientras que explícitas significa que las hemos declarado.
.grid {
grid-template-rows:70px;
grid-template-columns: 100px 100px;
grid-auto-rows: 140px;
}
En la regla superior estamos declarando de manera explícita una fila y dos columnas.
En el ejemplo inferior vemos como tenemos dos filas en lugar de una. La causa
es que tenemos cuatro items dentro del grid y estos no pueden desaparecer.
Como resultado genera una fila implícita para ubicarlos.
Si nos fijamos en la regla anterior habíamos declarado grid-auto-rows: 140px;, por eso
la fila implícita mide 140px.
1
2
3
4
Otra situación en la que nos encontramos con items implícitos dentro del grid es al posicionar uno de los items fuera del grid explícito.
.grid {
grid-template-rows: 70px 70px;
grid-template-columns: 100px 100px;
grid-auto-columns: 140px;
}
/*Posicionamos el item*/
.grid__item-1 {
grid-column: 3/4;
}
Al posicionar el item 1 entre el tercer y cuarto «track» generamos una columna implícita porque no hemos declarado esa tercera columna.
1
2
3
4
gird-auto-flow
Con auto-flow podemos ordernar el flujo natural de los items. Admite los
valores
1 row
2
3
4
5
6
7
8
9
10
11
1 column
2
3
4
5
6
7
8
9
10
11
1 row dense
2
3
4
5
6
7
8
9
10
11
1 column dense
2
3
4
5
6
7
8
9
10
11
Los valores row dense y column dense reparten los items evitando en todo lo posible los espacios en blanco. Aunque tengan que alterar el orden natural de los items.
Grid
Es un shorthand que unifica:
- grid-template-rows
- grid-template-columns
- grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
- grid-column-gap
- grid-row-gap
.grid {
grid: auto-flow 1fr / 100px;
}
/*Misma regla sin utilizar el shorthand*/
.grid {
grid-template: none / 100px;
grid-auto-flow: row;
grid-auto-rows: 1fr;
grid-auto-columns: auto;
grid-gap: 0;
}
No entro mucho a detallar el shorthand. No me gusta, aglutina demasiadas propiedades y sobretodo en los inicios cuando no tengo por mano todas las caracteristicas de grid me resulta más un estorbo que una ayuda.
Propiedades para los elementos internos del grid
grid-row-start | grid-row-end | grid-column-start | grid-column-end
Podemos determinar el inicio y el final de cada celda y asignar de este modo el espacio que ocupará cada item.
.grid {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(4, 70px);
grid-auto-rows: 70px;
grid-auto-columns: 100px;
justify-content: center;
align-content: center;
grid-gap: 10px 5px;
height: 500px;
margin: 2em;
}
.grid .grid__item-1 {
grid-row-start: 1;
grid-row-end: 4;
}
La regla anterior (code 14) da como resultado una celda que ocupa tres filas. Ya habíamos visto en grid-template-rows | grid-template-columns el significado de los tracks en grid. En esta ocasión estamos utilizando la nomenclatura implícita de los tracks para decirle a la celda 1 que empiece en el track 1 y termine en el track 4 de las filas.
Recordar que para utilizar tracks explícitos deberíamos crearlos con grid-template-rows | grid-template-columns. De este modo podemos utilizar nuestra propia nomenclatura.
.grid {
grid-template-rows: [r-inicio]70px [r-dos]70px [r-tres]70px [r-cuatro]70px [r-fin];
grid-template-columns: [c-inicio]100px [c-dos]100px [c-tres]100px [c-fin];
}
/*Tracks implícitos*/
.grid .grid__item-1 {
grid-row-start: 1;
grid-row-end: 4;
}
/*Tracks explícitos*/
.grid .grid__item-1 {
grid-row-start: r-inicio;
grid-row-end: r-cuatro;
}
1
2
3
4
5
6
7
8
9
10
11
Otro modo de posicionar un item de grid es con la palabra reservada span. Utilizando ahora grid-column-start
y grid-column-end veamos un ejemplo.
/*Regla aplicada en el ejemplo*/
.grid .grid__item-1 {
grid-column-start: 1;
grid-column-end: span 3;
}
/*Utilizando los tracks implícitos*/
.grid .grid__item-1 {
grid-column-start: 1;
grid-column-end: 4;
}
/*Utilizando los tracks explícitos*/
.grid .grid__item-1 {
grid-column-start: c-inicio;
grid-column-end: c-fin;
}
1
2
3
4
5
6
7
8
9
10
11
Con span le decimos al item cuantas celdas
debe ocupar.
Una de las características de esta propiedad es que admite valores negativos. Y row-start o colunmn-start no tienen que ser necesariamente el principio de la celda. Con este pequeño juego se entiende bastante bien el funcionamiento.
grid-column | grid-row
- grid-column
- Es un shorthand de grid-column-start y grid-column-end
- grid-row
- Es un shorthand de grid-row-start y grid-row-end
.grid .grid__item-2 {
grid-column: 1 / 4;
grid-row: 1 / 3;
}
/*shorthand utilizando track explícito*/
.grid .grid__item-2 {
grid-column: c-inicio / c-fin;
grid-row: r-inicio / r-tres;
}
/*shorthand con span*/
.grid .grid__item-2 {
grid-column: c-inicio / span 3;
grid-row: r-inicio / span 2;
}
1
2
3
4
5
6
7
8
9
10
11
El prmier valor corresponde a las versiones «start» y el segundo a «end». Podemos utilizar tanto span como valores negativos.
Si posicionamos los items unos encima de otros podemos utilizar z-index para ordenarlos en el eje z.
1
z-index 3
3
z-index 2
5
z-index 1
7
8
9
10
11
grid-area
En grid-template-areas introducimos el concepto de grid-area.
Con grid-area posicionamos los elemntos con los nombres creados en el grid-tamplate-areas.
.grid {
display:grid;
grid-template-areas:
"header header header"
"sidebar-left main main"
"footer footer footer";
}
.grid .grid__header {
grid-area: header;
}
.grid .grid__sidebar {
grid-area: sidebar-left;
}
.grid .grid__main {
grid-area: main;
}
.grid .grid__footer {
grid-area: footer;
}
header
sidebar-left
main
footer
Otro de los usos de grid-area es como shorthand:
grid-row-start + grid-column-start + grid-row-end + grid-column-end
Con el podemos posicionar el item del mismo modo que hacíamos con las propiedades estándar.
.grid {
display: grid;
grid-template-columns: [c-inicio]100px [c-dos]100px [c-fin];
grid-template-rows: [r-inicio]70px [r-dos]70px [r-fin];
}
.grid .grid__item-1 {
grid-area: 2 / 2 / 2 / 2;
/*Las tres declaraciones son correctas*/
grid-area: r-dos / c-dos / r-fin/ c-fin;
grid-area: r-dos / c-dos / span 1/ span 1;
}
1
2
3
4
Tanto tracks implícitos como explícitos y span son válidos
justify-self
Alinear el contenido del item en el eje de las columnas. Los valores admitidos son:
start | end | center | stretch (por defecto)
start
end
center
stretch
5
6
align-self
Alinear el contenido del item en el eje de las filas. Los valores son:
start | end | center | stretch (por defecto)
start
end
center
stretch
5
6
Recursos Grid Layout
- Español
- Descripción de las principales propiedades y ejemplos. CSS Grid Layout: guía básica para comenzar a usarlo .
- Guía de propiedades en grid Grid CSS (Cuadrículas)
- Grid css explicado de manera detallada Propiedades del contenedor grid . En la misma web podemos encontrar propiedades de los items y explicaciones sobre palabras reservadas .
- Ingles
- El recurso más fiable de todos w3c grid layout
- Posiblemente la mejor referencia para aprender grid. Recopilación de artículos, ejemplos, videos …. gridbyexample.com
- Guía de css-tricks A Complete Guide to Grid .
- Guía bien ilustrada para entender cada una de las propiedades en grid. learncssgrid
- Aprender grid jugando grid garden .
- Progressively enhancing (mejora progresiva) en css layout Progressively enhancing . Incluye una demo para ayudarnos a entender el concepto.
Comentarios recientes