Definición de .grid en CSS
La propiedad CSS .grid es una abreviatura que le permite establecer todas las propiedades implícitas y explícitas .grid en una sola declaración.
Caso de empleo : propiedad CSS grid
Si te gustaría utilizar esta propiedad de CSS en tu hoja de estilos, hazlo de esta forma:
.grid-container {
display: grid;
grid: auto-flow dense / repeat(5, 150px);
}Sintaxis de .grid en CSS
grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;Valores
| Valor | Descripción | Manifestación |
|---|---|---|
| ninguna | Valor por defecto. Sin tamaño específico de las columnas o filas | |
| cuadrícula-plantilla-filas / cuadrícula-plantilla-columnas | Especifica el(los) tamaño(s) de las columnas y filas | |
| cuadrícula-plantilla-áreas | Especifica el diseño de la cuadrícula usando elementos con nombre | |
| grid-plantilla-filas / grid-auto-columnas | Especifica el tamaño (altura) de las filas y el tamaño automático de las columnas | |
| cuadrícula-auto-filas / cuadrícula-plantilla-columnas | Especifica el tamaño automático de las filas y establece la propiedad grid-template-columns | |
| grid-template-rows / grid-auto-flow grid-auto-columns | Especifica el tamaño (alto) de las filas y cómo colocar elementos colocados automáticamente y el tamaño automático de las columnas | |
| grid-auto-flow grid-auto-rows / grid-template-columns | Especifica cómo colocar elementos colocados automáticamente y el tamaño automático de las filas, y establece la propiedad grid-template-columns | |
| inicial | Establece esta propiedad en su valor predeterminado. Leer sobre inicial | |
| heredar | Hereda esta propiedad de su elemento principal. Leer acerca de |
Exploradores compatibles con .grid
Los números de la tabla detallan la primera versión del navegador que es completamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| grid-auto-columns | 57 | 16 | 52 | 10 | 44 |
