Te enseño la propiedad css grid
y varios ejemplos de distribuciones
Grid (vs Flex)
Utilizar el grid
de css puede parecer complicado ya que aparentemente hay muchas variantes y resulta poco intuitivo
No lo mejora la alternativa (complementaria) display:flex
ya que és o parece igualmente compleja y además confunde al poder utilizar ambos métodos para más o menos lo mismo
La diferencia entre grid
y flex
es conceptual, y aunque puedes ejecutar diseños iguales con ambas tecnologías, una recomendación interesante sería ésta:
-
Utilizar
grid
cuando queramos organizar distribuciones en 2 dimensiones, yflex
cuando queramos organizar distribuciones en 1 dimensión -
Y/o utilizar
grid
cuando queramos priorizar la distribución por encima del contenido, yflex
cuando queramos priorizar el contenido por encima de la distribución
Voy a repasar las propiedades básicas de grid
, lo mejor es verlo también de forma visual, y tienes distribuciones de ejemplo aquí en distribuciones grid
display: grid;
Utilizar grid
es tan fácil como ponerlo en la definición de display
de tu elemento
display: grid;
display: inline-grid;
Con grid
tienes una disposición en filas donde los elementos de dentro se expanden para ocupar todo el ancho del padre
Si quieres que el ancho se ajuste al contenido, utiliza inline-grid
grid-template-columns
El gran qué de grid
es especificarle cuantas columnas (o filas) queremos, aquí lo explico en columnas ya que es la utilización más habitual
display: grid;
/* con valores absolutos de px, aunque es más recomendable trabajar en unidades relativas */
grid-template-columns: 90px 50px 120px;
/* con valores relativos de `fr` que se refiere a la fracción de espacio libre que tenemos (aquí el espacio total será de 1+2+1 = 4fr) */
grid-template-columns: 1fr 2fr 1fr;
/* mezclando valores absolutos con relativos, el relativo se calcula restando el absoluto del total */
grid-template-columns: 90px 2fr 1fr;
/* valores en relativo, también con porcentajes o con rem */
grid-template-columns: 20% 1fr 2rem;
/* otro ejemplo de valores relativos, aquí con auto definirá el ancho en función del contenido */
grid-template-columns: auto auto auto;
/* Y también podemos mezclar auto (relativo al contenido) con valores relativos (relativos al espacio) */
grid-template-columns: 1fr 1fr auto;
minmax
Con minmax
en lugar de definir un número como hemos hecho antes, podemos definir un mínimo y un máximo
Esto da un plus de versatilidad muy grande
Por ejemplo, si queremos una tabla con filas de una longitud mínima de 50px pero una longitud máxima sin especificar y en relación al contenido
display: grid;
grid-template-rows: minmax(50px, auto);
grid-template-columns: 1fr auto 1fr;
repeat
Si tenemos 20 elementos y los queremos organizar en 4 columnas, no es necesario especificar las 5 filas que se ocuparán
La manera de definirlos es con grid-auto-rows
o grid-auto-columns
Y si quieres ahorrar carácteres, tenemos a mano el repeat
display: grid;
grid-template-rows: repeat(5, minmax(50px, auto)) 400px;
grid-auto-rows: minmax(50px, auto));
grid-template-columns: 1fr auto 1fr;
En este ejemplo definimos con repeat
las primeras 5 filas, luego una sexta con 400 px, y a partir de allí todas tendrían el aspecto de minmax(50px, auto)) al haberlo definido con grid-auto-rows
grid-gap
Con grid
y a diferencia de flex
definir los espacios entre columnas y filas es muy fácil
grid-row-gap: 10px;
grid-column-gap: 1rem;
/* o las dos a la vez */
grid-gap: 10px 1rem;
Como detalle, fíjate que en columnas defino el espacio en px
, ya que se asume que el usuario siempre tendrá scroll vertical, mientras que para las columnas lo defino en unidades relativas, porque se asume que el usuario nunca tendrá scroll horizontal (algo que normalmente quieres evitar)
grid-area
o habilitar celdas que ocupen más que su espacio
grid
nos permite definir celdas que ocupen el equivalente a dos celdas contiguas (o más) tanto en horizontal como en vertical
También nos permite colocar celdas en el órden en que queramos, lo que nos permite por ejemplo poder posicionar un CTA en una posición específica de nuestro grid de entradas aunque en el html esté al final de la lista
.item {
grid-row: 2;
grid-column: 4;
/* o en una línea */
grid-area: 2 / 4;
}
En este caso ese ítem se sitúa en la fila 2 y columna 4
También podemos expandir la celda
grid-row: 2 / 3;
grid-column: 4 / 5;
/* en una línea */
grid-area: 2 / 4 / 3 / 5;
En este caso la celda se coloca en la fila 2, columna 3 y no se expande ya que termina en la fila y columna siguiente, es decir que lo que acabo de escribir es idéntico a lo anterior
Por el contrario, si quiero expandir la celda 2 columnas:
grid-row: 2;
grid-column: 4 / 6;
/* equivalente */
grid-area: 2 / 4 / 3 / 6;
Sin embargo, para mi es más intuitivo utilizar la palabra clave span para decir cuantas posiciones se tiene que expandir la celda
grid-row: 2;
grid-column: 4 / span 2;
/* en una línea */
grid-area: 2 / 4 / span 1 / span 2;
Y en cualquier caso, estas especificaciónes tienen que ir siempre en el ítem y no en el container
Alineando los elementos del grid
Para ajustar la organización del grid tenemos las expresiones
justify-items: auto | normal | start | end | center | stretch | baseline | first baseline | last baseline;
align-items: auto | normal | start | end | center | stretch | baseline | first baseline | last baseline;
Tenemos que elegir una de estas opciones, donde para justify-items especificamos la horizontal y para align-items especificamos la vertical
Si queremos ajustar todo el grid en relación al container en sí, tenemos el contents
justify-contents: normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline
align-contents: normal | start | end | center | stretch | space-around | space-between | space-evenly | baseline | first baseline | last baseline
La diferencia entre contents
e items
es que el primero organiza en base al espacio de toda la grid, mientras que el segundo se refiere a los items en particular
Pero también podemos definir exactamente lo mismo pero a nivel de item en lugar de los containers con las siguientes expresiones:
justify-self: auto | normal | start | end | center | stretch | baseline | first baseline | last baseline;
align-self: auto | normal | start | end | center | stretch | baseline | first baseline | last baseline;
La mayoría de veces es más sencillo verlo que leerlo, y para eso aquí tienes ejemplos
Lista de correo: escribo algo de tanto en cuanto