Propiedad grid-template-areas

La propiedad grid-template-areas define la colocación de elementos en grid. Primero, asignamos un nombre a cada elemento hijo mediante la propiedad grid-area. Luego, en el elemento padre especificamos la propiedad grid-template-areas, en la cual listamos los nombres de los elementos hijos en el orden en que queremos colocarlos en el grid.

Sintaxis

cssselector {
  grid-template-areas: nombres de elementos hijos;
}

Ejemplo

Vamos a definir la disposición de nuestros elementos en el grid:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}

#parent {
  display: grid;
  grid-template-areas: 'second first third';
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Ejemplo

Y ahora, en lugar de los nombres de algunos elementos, indiquemos un punto '.'. Como se puede ver en el resultado del código ejecutado, en este caso se colocará un bloque vacío en el esquema:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}
#parent {
  display: grid;
  grid-template-areas: 'first . second third';
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Véase también