Propiedad CSS grid-template

La propiedad grid-template define las columnas, filas y áreas de la cuadrícula. Es una propiedad abreviada para las siguientes propiedades:

La propiedad grid-template establece las filas y columnas, separadas por una barra diagonal.

INFO

La propiedad grid-template no afecta a ninguna separación (gap) que se herede.

La propiedad abreviada de CSS grid restablece otras propiedades de la cuadrícula (como grid-auto-rows y grid-gap) a sus valores iniciales. Si desea establecer solo filas, columnas y áreas sin afectar otras propiedades de la cuadrícula, utilice grid-template en lugar de grid.

Valor inicial	none
Se aplica a	Contenedores de cuadrícula.
Heredable	No.
Animable	Sí. El diseño de cuadrícula es animable.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.style.gridTemplate ="100px / auto auto";

Sintaxis

Sintaxis de CSS grid-template

css

grid-template: none | [ <grid-template-rows> / <grid-template-columns> ] | <grid-template-areas> | initial | inherit;

Ejemplo de la propiedad grid-template:

Ejemplo de código CSS grid-template

html

<!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>

Try it Yourself »

Resultado

CSS grid-template another

Ejemplo de la propiedad grid-template, donde se asigna el nombre "item1" a un elemento de la cuadrícula:

Otro ejemplo de código CSS grid-template

html

<!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>

Try it Yourself »

Valores

Valor	Descripción	Probar
none	No se definirá ningún tamaño. Este es el valor predeterminado de esta propiedad.	-
grid-template-rows / grid-template-columns	Especifica el tamaño de las filas y columnas.	Probar »
grid-template-areas	Especifica el diseño de la cuadrícula utilizando elementos con nombre. Sintaxis: `<string>+`	Probar »
initial	Hace que la propiedad utilice su valor predeterminado.	-
inherit	Hereda la propiedad de su elemento padre.	-

Práctica

¿Qué representa la propiedad 'grid-template' en CSS?

Permite crear un diseño adaptable con filas y columnas.Se utiliza para alinear el contenido dentro de un elemento de la cuadrícula.Es una propiedad abreviada para 'grid-template-rows', 'grid-template-columns' y 'grid-template-areas'.Cambia el color de fondo de una cuadrícula.

Propiedad CSS grid-template ​

Sintaxis ​

Ejemplo de la propiedad grid-template: ​

Resultado ​

Ejemplo de la propiedad grid-template, donde se asigna el nombre "item1" a un elemento de la cuadrícula: ​

Valores ​