grid

Índice

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.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
grid-auto-columns 57 16 52 10 44

Bibliografía

Quizás quieras echar un vistazo a estas otras propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso