Propiedad abreviada CSS grid — Guía completa

La propiedad CSS grid es una abreviatura que permite definir todo un diseño de CSS Grid en una sola declaración. Establece las siguientes seis subpropiedades a la vez en el contenedor de cuadrícula:

grid-template-rows — alturas de las filas explícitas
grid-template-columns — anchos de las columnas explícitas
grid-template-areas — regiones con nombre del diseño
grid-auto-rows — altura de las filas creadas implícitamente
grid-auto-columns — ancho de las columnas creadas implícitamente
grid-auto-flow — dirección en la que se añaden los elementos colocados automáticamente

La propiedad grid se aplica únicamente a un contenedor de cuadrícula — un elemento con display: grid o display: inline-grid.

Importante: Cualquier subpropiedad que no menciones en una declaración grid se restablece a su valor inicial. Esta es la diferencia clave respecto a establecer subpropiedades individualmente — grid siempre comienza desde cero.

Pistas explícitas vs. implícitas

Comprender esta distinción es la clave para leer cualquier valor de grid:

Las pistas explícitas son las filas y columnas que defines manualmente. El / en el valor separa las filas (izquierda) de las columnas (derecha): grid: 100px 200px / 1fr 1fr significa dos filas explícitas y dos columnas explícitas.
Las pistas implícitas son filas o columnas adicionales que el navegador crea automáticamente cuando hay más elementos de los que la cuadrícula explícita puede contener. grid-auto-rows / grid-auto-columns establecen sus tamaños, y grid-auto-flow decide si el desbordamiento va a nuevas filas (el comportamiento predeterminado) o nuevas columnas.

Puedes especificar o bien las propiedades explícitas o bien las implícitas en una sola abreviatura grid — no ambas al mismo tiempo.

La unidad `fr`

Los diseños de cuadrícula usan frecuentemente fr (unidad de fracción). 1fr significa "una parte del espacio disponible". Tres columnas definidas como 1fr 1fr 1fr obtienen cada una un tercio del ancho del contenedor. También puedes mezclar fr con tamaños fijos: 200px 1fr le da a la primera columna 200 px y a la segunda columna todo el espacio restante.

Sintaxis

/* Keyword */
grid: none;

/* Explicit rows / columns */
grid: <grid-template-rows> / <grid-template-columns>;

/* Template areas */
grid: <grid-template>;

/* Implicit rows, explicit columns */
grid: [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>;

/* Explicit rows, implicit columns */
grid: <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?;

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

La notación && significa que ambas palabras clave deben aparecer; su orden no importa. El ? indica que el término es opcional.

Valor inicial	`none`
Se aplica a	Contenedores de cuadrícula
Se hereda	No
Animable	Sí (el diseño de cuadrícula es animable)
Versión CSS	CSS Grid Layout Module Level 1
Sintaxis DOM	`element.style.grid = "100px / 1fr 1fr"`

Formas de valor

Valor	Qué hace
`none`	Elimina cualquier plantilla explícita; todas las subpropiedades se restablecen al valor inicial.
`<template-rows> / <template-columns>`	Establece pistas de filas y columnas explícitas.
`<grid-template>`	Abreviatura para `grid-template-rows`, `grid-template-columns` y `grid-template-areas`.
`<template-rows> / auto-flow [dense] [<auto-cols>]`	Filas explícitas; las columnas se generan automáticamente. Añade `dense` para rellenar huecos.
`auto-flow [dense] [<auto-rows>] / <template-cols>`	Las filas se generan automáticamente; las columnas son explícitas.
`initial`	Restablece la propiedad a su valor predeterminado (`none`).
`inherit`	Hereda el valor calculado del elemento padre.

Ejemplos

Ejemplo 1: Cuadrícula explícita básica

grid: 100px / auto auto auto crea una fila explícita (de 100 px de alto) y tres columnas de ancho auto iguales. Las nueve cajas desbordan en filas implícitas adicionales (de tamaño automático):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo 2: Auto-flow hacia columnas

grid: auto auto / auto-flow establece dos filas explícitas e indica al navegador que genere columnas automáticamente al colocar los elementos. Cada elemento fluye hacia una nueva columna hasta que todos los elementos están colocados, llenando ambas filas columna por columna.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo 3: Posicionamiento explícito de elementos con `grid-area`

Cada caja se posiciona con grid-area usando la sintaxis row-start / column-start / row-end / column-end sobre una plantilla grid: 100px / auto auto auto:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Ejemplo 4: Unidades `fr` para columnas flexibles

Usar unidades fr es el patrón más común para cuadrículas adaptables. Las tres columnas a continuación toman una parte igual del ancho disponible y se reducen o expanden juntas:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto / 1fr 1fr 1fr;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.9);
        text-align: center;
        padding: 20px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Three equal columns with fr units</h2>
    <div class="grid-container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
    </div>
  </body>
</html>

La regla grid: auto / 1fr 1fr 1fr es equivalente a la versión más detallada:

grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
/* all other grid sub-properties reset to initial */

Ejemplo 5: Áreas de plantilla con nombre

La abreviatura grid admite la sintaxis de grid-template-areas directamente. Cada cadena entre comillas representa una fila; cada palabra dentro es un nombre de área. Un . (punto) marca una celda vacía.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .layout {
        display: grid;
        grid:
          "header header header" 60px
          "sidebar main   main"  1fr
          "footer footer footer" 40px
          / 160px 1fr 1fr;
        gap: 8px;
        height: 260px;
        background-color: #ccc;
        padding: 8px;
      }
      .header  { grid-area: header;  background: #1c87c9; color: #fff; display: flex; align-items: center; justify-content: center; }
      .sidebar { grid-area: sidebar; background: #8ecae6; display: flex; align-items: center; justify-content: center; }
      .main    { grid-area: main;    background: #eee;    display: flex; align-items: center; justify-content: center; }
      .footer  { grid-area: footer;  background: #023e8a; color: #fff; display: flex; align-items: center; justify-content: center; }
    </style>
  </head>
  <body>
    <div class="layout">
      <div class="header">Header</div>
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

El valor después de cada cadena de fila entre comillas (60px, 1fr, 40px) es la altura de la fila. El / al final inicia la lista de anchos de columna (160px 1fr 1fr).

Cuándo usar `grid` vs. `grid-template`

Objetivo	Usa
Establecer solo tamaños explícitos de filas/columnas y áreas nombradas	`grid-template`
También controlar la dirección de colocación automática o tamaños de pistas implícitas	`grid`
Solo establecer anchos de columna	`grid-template-columns`
Solo establecer alturas de fila	`grid-template-rows`

Usar la abreviatura más específica hace que el código sea más fácil de leer y evita restablecer accidentalmente subpropiedades no relacionadas.

Compatibilidad con navegadores

La abreviatura grid es compatible con todos los navegadores modernos (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+). En entornos más antiguos puede ser necesario establecer las subpropiedades individualmente. Consulta los datos de compatibilidad actuales en Can I use: CSS Grid Layout.

Ver también

grid-template — abreviatura solo para las subpropiedades de plantilla
grid-template-columns y grid-template-rows — tamaño de pistas explícitas
grid-template-areas — nombrar regiones del diseño
grid-auto-flow — controlar cómo los elementos colocados automáticamente llenan la cuadrícula
grid-auto-rows y grid-auto-columns — tamaño de pistas implícitas
grid-gap — espaciado entre filas y columnas
grid-area — posicionar un elemento por área nombrada o números de línea
display — el valor grid que convierte un elemento en un contenedor de cuadrícula
align-items y justify-content — alineación dentro de la cuadrícula

Práctica

¿Cuáles de las siguientes afirmaciones sobre la propiedad abreviada CSS grid son correctas?

Es una abreviatura que restablece las seis subpropiedades de cuadrícula a la vez, incluyendo tanto las propiedades de plantilla como las de colocación automática.Las subpropiedades que omites de una declaración grid se restablecen a sus valores iniciales.La unidad fr divide el espacio disponible en partes fraccionarias iguales entre columnas o filas.La abreviatura grid puede establecer tanto pistas de plantilla explícitas como propiedades de auto-flow al mismo tiempo en una sola declaración.grid: auto / 1fr 1fr crea dos columnas de igual ancho con una fila de tamaño automático.

Pistas explícitas vs. implícitas

La unidad fr

Sintaxis

Formas de valor

Ejemplos

Ejemplo 1: Cuadrícula explícita básica

Ejemplo 2: Auto-flow hacia columnas

Ejemplo 3: Posicionamiento explícito de elementos con grid-area

Ejemplo 4: Unidades fr para columnas flexibles

Ejemplo 5: Áreas de plantilla con nombre

Cuándo usar grid vs. grid-template

Compatibilidad con navegadores

Ver también

Práctica

La unidad `fr`

Ejemplo 3: Posicionamiento explícito de elementos con `grid-area`

Ejemplo 4: Unidades `fr` para columnas flexibles

Cuándo usar `grid` vs. `grid-template`