CSS Grid Layout
El grid es un conjunto de líneas horizontales y verticales que se cruzan, y que definen las columnas y filas del grid.
CSS proporciona un sistema de diseño basado en cuadrículas, con filas y columnas, que nos permite diseñar páginas web más fácilmente, sin necesidad de usar flotadores ni posicionamiento.
El siguiente es un diseño de página web simple que utiliza el grid layout, con seis columnas y tres filas:
Soporte de navegadores
Actualmente, algunas de las versiones más recientes de los navegadores son compatibles con el grid layout.
| 57.0 | 16.0 | 52.0 | 10 | 44 |
Elementos del grid
El grid layout está formado por un elemento padre y uno o más elementos hijos.
Ejemplo
Pruébalo »
La propiedad display
Cuando un elemento HTML establece la propiedad display en grid o inline-grid, se convierte en un contenedor de cuadrícula, y todos los elementos hijos directos de este elemento se convierten en elementos de la cuadrícula.
Pistas del grid
Usamos lagrid-template-columnsygrid-template-rowspropiedad para definir las columnas y filas del grid.
Estas propiedades definen las pistas del grid. Una pista del grid es el espacio entre dos líneas cualesquiera del grid.
En la siguiente imagen puedes ver una pista en un recuadro verde: la primera pista de fila del grid. La segunda fila tiene tres pistas en recuadros blancos.
En el siguiente ejemplo usamos lagrid-template-columnspropiedad para crear cuatro columnas en el contenedor del grid:
En el siguiente ejemplo usamos lagrid-template-rowspropiedad para establecer la altura de las filas en el contenedor del grid:
La unidad fr
Las pistas se pueden definir utilizando cualquier unidad de longitud.
El grid introduce lafrunidad para ayudarnos a crear pistas de grid flexibles. Una unidad fr representa una parte igual del espacio disponible en el contenedor del grid.
El siguiente ejemplo define un grid que creará tres pistas de igual ancho, las cuales crecerán y se contraerán con el espacio disponible.
Celdas del grid
Una celda del grid es la unidad más pequeña dentro de un elemento del grid. Conceptualmente, es muy similar a una celda de una tabla. Ahora, volviendo a nuestro ejemplo anterior, una vez que un elemento del grid se define dentro de un elemento padre, sus elementos hijos se colocarán en cada celda del grid predefinida. En la siguiente imagen, resaltaré la primera celda del grid.
Área del grid
Los elementos del grid pueden expandirse una o más celdas en dirección de las filas o de las columnas, creando así un área del grid. La forma de un área del grid debe ser rectangular; es decir, no es posible crear un área del grid con forma de "L". El área del grid resaltada en la siguiente imagen se extiende 2 columnas y 2 filas.
Columnas del grid
La dirección vertical de los elementos del grid se llama columna.
Filas del grid
La dirección horizontal de los elementos del grid se llama fila.
Espaciado del grid
El espaciado del grid (Column Gap) se refiere al espaciado horizontal o vertical de la cuadrícula entre dos celdas del grid.
Puede utilizar las siguientes propiedades para ajustar el tamaño del espacio:
- grid-column-gap
- grid-row-gap
- grid-gap
El siguiente ejemplo usa lagrid-column-gappropiedad para establecer el espaciado del grid entre columnas:
El siguiente ejemplo usa lagrid-row-gappropiedad para establecer el espaciado del grid entre filas:
grid-gapLa propiedad es una forma abreviada de las propiedades grid-row-gap y grid-column-gap:
grid-gapLa propiedad puede establecer el espacio entre filas y columnas al mismo tiempo:
Líneas del grid
Los bordes entre columna y columna, y entre fila y fila, son las líneas del grid.
Grid crea líneas del grid numeradas para que podamos localizar cada elemento del grid.
Por ejemplo, en este grid de tres columnas y dos filas, hay cuatro líneas verticales del grid (marcadas con círculos grises) y tres líneas horizontales del grid (marcadas con círculos negros).
Al configurar los elementos del grid, se puede hacer referencia a estos números de línea.
La siguiente imagen define cuatro líneas verticales del grid y cuatro líneas horizontales del grid:
El orden de numeración de las líneas del grid depende del modo de escritura del texto. En los idiomas que se escriben de izquierda a derecha, la línea del grid número 1 se encuentra en el extremo izquierdo. En los idiomas que se escriben de derecha a izquierda, la línea del grid número 1 se encuentra en el extremo derecho.
A continuación, he utilizado las propiedades grid-column-start, grid-column-end, grid-row-start y grid-row-end para demostrar cómo usar las líneas del grid.
En el siguiente ejemplo, configuramos las líneas del grid de un elemento para que comiencen en la primera columna y terminen en la tercera columna:
En el siguiente ejemplo, configuramos las líneas del grid de un elemento para que comiencen en la primera fila y terminen en la tercera fila:
Propiedades de CSS Grid
| Propiedad | Descripción |
|---|---|
| column-gap | Especifica el espacio entre columnas |
| gap | row-gapycolumn-gapes la forma abreviada de |
| grid | grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, ygrid-auto-flowes la forma abreviada de |
| grid-area | Especifica el nombre del elemento del grid, o también puede sergrid-row-start, grid-column-start, grid-row-end, ygrid-column-endes la forma abreviada de |
| grid-auto-columns | Se refiere al tamaño de columna predeterminado |
| grid-auto-flow | Especifica cómo funciona el algoritmo de diseño automático, determinando con precisión cómo se ordenan los elementos colocados automáticamente en el grid. |
| grid-auto-rows | Se refiere al tamaño de fila predeterminado |
| grid-column | grid-column-startygrid-column-endes la forma abreviada de |
| grid-column-end | Especifica la posición final de la columna del elemento del grid |
| grid-column-gap | Especifica el tamaño del espacio entre los elementos del grid |
| grid-column-start | Especifica la posición inicial de la columna del elemento del grid |
| grid-gap | grid-row-gapygrid-column-gapes la forma abreviada de |
| grid-row | grid-row-startygrid-row-endes la forma abreviada de |
| grid-row-end | Especifica la posición final de la fila del elemento del grid |
| grid-row-gap | Especifica el espacio entre filas de los elementos del grid |
| grid-row-start | Especifica la posición inicial de la fila del elemento del grid |
| grid-template | grid-template-rows, grid-template-columnsygrid-areases la forma abreviada de |
| grid-template-areas | Especifica cómo mostrar filas y columnas, utilizando elementos del grid con nombre |
| grid-template-columns | Especifica el tamaño de las columnas y la cantidad de columnas definidas en el grid layout |
| grid-template-rows | Especifica el tamaño de las filas en el grid layout |
| row-gap | Especifica el espacio entre dos filas |
Otras extensionesA continuación, podemos usarel minijuego de CSS Grid Layoutpara poner a prueba lo que hemos aprendido.