Propiedad CSS grid-template

La propiedad CSS grid-template define las filas, columnas y áreas con nombre de un CSS grid en una sola declaración. Es un shorthand de tres propiedades individuales:

grid-template-rows — la altura de cada pista de fila.
grid-template-columns — el ancho de cada pista de columna.
grid-template-areas — regiones con nombre en las que puedes colocar elementos con grid-area.

Esta página explica la sintaxis, cómo la barra oblicua separa las filas de las columnas, cómo funciona la forma de áreas con nombre, cuándo usar grid-template en lugar del shorthand más amplio grid, y muestra ejemplos ejecutables que puedes editar en vivo.

Cómo funciona el shorthand

grid-template solo se aplica a un contenedor de grid — un elemento con display: grid (o inline-grid). La propiedad tiene dos formas principales.

Forma filas / columnas

Coloca primero los tamaños de fila, luego una barra oblicua (/) y después los tamaños de columna:

.container {
  display: grid;
  grid-template: 100px 200px / 1fr 1fr 1fr; /* two rows / three columns */
}

El / es obligatorio cuando se especifican tanto filas como columnas: le indica al navegador dónde comienza la lista de columnas. Los tamaños pueden usar cualquier unidad de dimensionado de pistas:

Unidad	Significado
`px`, `%`, `em`	Tamaños fijos o relativos
`fr`	Una fracción del espacio libre restante
`auto`	Dimensionado por el contenido, luego distribuye el espacio restante
`min-content`	El tamaño más pequeño que evita el desbordamiento
`max-content`	El tamaño más grande sin ajuste de línea
`minmax(min, max)`	Un rango — p. ej. `minmax(100px, 1fr)`
`repeat(n, size)`	Repite una pista `n` veces — p. ej. `repeat(3, 1fr)`

La unidad fr es exclusiva del layout de grid. 1fr 2fr significa "una parte y dos partes del espacio libre", por lo que la segunda pista es el doble de ancha que la primera.

Forma de áreas con nombre

Cada cadena entre comillas representa una fila. Las palabras dentro de la cadena nombran las celdas de esa fila. Las celdas que comparten el mismo nombre en varias filas se fusionan en un área rectangular. Un punto (.) deja una celda sin nombre:

.container {
  display: grid;
  grid-template:
    "header header" 60px
    "nav    main"   1fr
    / 120px 1fr;
}

El tamaño de fila (p. ej. 60px, 1fr) se escribe después de la cadena entre comillas, antes de la siguiente cadena. Los tamaños de columna opcionales van después del / final.

Luego puedes colocar elementos en áreas con nombre usando grid-area:

header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }

Esta es la forma más legible de describir un layout de página clásico en CSS.

Información

grid-template no establece el espacio entre pistas. Usa gap (o la propiedad individual column-gap) para el espaciado entre pistas. Los espacios son independientes del dimensionado de pistas.

grid-template vs. grid

El shorthand más amplio grid también restablece las propiedades de grid implícito — grid-auto-rows, grid-auto-columns y grid-auto-flow — a sus valores iniciales. grid-template deja esas propiedades intactas.

Cuándo usar cada uno:

Usa grid-template cuando solo quieras definir las pistas y áreas explícitas sin afectar el comportamiento de colocación automática.
Usa grid cuando quieras un único restablecimiento de todas las propiedades de grid a la vez.

Referencia de la propiedad

Característica	Valor
Valor inicial	`none`
Se aplica a	Contenedores de grid
Heredada	No
Animable	Sí — los tamaños de pista son animables
Especificación	CSS Grid Layout Module Level 1

Sintaxis

grid-template: none
             | <grid-template-rows> / <grid-template-columns>
             | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
             | initial | inherit | unset;

Valores

Valor	Descripción
`none`	Restablece los tres longhands (`grid-template-rows`, `grid-template-columns`, `grid-template-areas`) a sus valores iniciales. Los elementos se colocan mediante el algoritmo de colocación automática.
`<rows> / <columns>`	Establece pistas explícitas de filas y columnas. Cualquier unidad de dimensionado es válida: `px`, `%`, `fr`, `auto`, `minmax()`, `repeat()`, etc.
`"area-names" <size>`	Establece áreas con nombre fila por fila. Cada cadena entre comillas es una fila; el tamaño opcional después de ella es la altura de esa fila.
`initial`	Restablece la propiedad a `none`.
`inherit`	Hereda el valor calculado del elemento padre.
`unset`	Actúa como `inherit` si la propiedad es heredable; de lo contrario, como `initial`.

Ejemplos

Definir filas y columnas

Este grid tiene una fila explícita de 170px y tres columnas dimensionadas con auto. Los elementos que superan la primera fila fluyen hacia filas creadas implícitamente.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template: 170px / auto auto auto;
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado:

Usar áreas con nombre

Aquí el primer elemento recibe el nombre item1 mediante grid-area. Las dos cadenas entre comillas colocan item1 en un bloque 2×2 en la esquina superior izquierda. Los puntos (.) marcan celdas vacías en las que fluyen los elementos restantes.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template: 'item1 item1 . .' 'item1 item1 . .';
        grid-gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Layout de página con áreas con nombre

Un layout clásico de tres secciones — encabezado, barra lateral y contenido — definido en una sola declaración grid-template:

<!DOCTYPE html>
<html>
  <head>
    <title>Named area layout</title>
    <style>
      .page {
        display: grid;
        grid-template:
          "header  header"  60px
          "sidebar content" 1fr
          "footer  footer"  40px
          / 160px 1fr;
        gap: 8px;
        height: 300px;
      }
      .page > * {
        background: #dde;
        padding: 8px;
        font-family: sans-serif;
      }
      .hdr  { grid-area: header; }
      .side { grid-area: sidebar; }
      .main { grid-area: content; }
      .ftr  { grid-area: footer; }
    </style>
  </head>
  <body>
    <div class="page">
      <div class="hdr">Header</div>
      <div class="side">Sidebar</div>
      <div class="main">Content</div>
      <div class="ftr">Footer</div>
    </div>
  </body>
</html>

El layout está completamente definido en una sola propiedad: tres filas (60 px / flexible / 40 px) y dos columnas (barra lateral de 160 px / contenido flexible). No se necesitan spans de grid-column ni de grid-row: los nombres hacen el trabajo.

Errores comunes

Las áreas deben formar un rectángulo. No puedes crear un área con nombre en forma de L o T. Si lo intentas, la declaración es inválida y el navegador la ignora.

El número de filas debe coincidir. El número de celdas en cada cadena entre comillas debe ser igual. "a b" seguido de "a b c" es inválido.

grid-template restablece los tres longhands. Establecer grid-template: 1fr / 1fr implícitamente establece grid-template-areas: none, por lo que cualquier área con nombre definida anteriormente se elimina.

Las pistas implícitas no se ven afectadas. grid-template solo controla el grid explícito. Los elementos adicionales que desbordan las filas y columnas definidas se colocan en pistas implícitas, dimensionadas por grid-auto-rows y grid-auto-columns.

Compatibilidad con navegadores

grid-template forma parte de CSS Grid Layout Module Level 1 y es compatible con todos los navegadores modernos (Chrome 57+, Edge 16+, Firefox 52+, Safari 10.1+, Opera 44+). No tiene efecto en elementos que no son contenedores de grid: combínala siempre con display: grid.

Práctica

¿Qué hace la propiedad CSS grid-template?

Permite definir filas, columnas y áreas con nombre para un contenedor de grid en una sola declaración.Se usa para alinear el contenido dentro de un elemento de grid.Es un shorthand de grid-template-rows, grid-template-columns y grid-template-areas.Cambia el color de fondo de un contenedor de grid.