Propiedad CSS grid-template-areas

La propiedad grid-template-areas se utiliza para definir áreas de cuadrícula con nombre asignando nombres a las celdas de la cuadrícula. Puedes nombrar los elementos de la cuadrícula con la propiedad grid-area. Cada área se define entre comillas dobles. Estas áreas pueden referenciarse desde propiedades de colocación de cuadrícula como grid-row-start, grid-row-end, grid-column-end, grid-column-start, así como sus propiedades abreviadas, como grid-row, grid-area y grid-column.

Valor inicial	none
Se aplica a	Contenedores de cuadrícula.
Heredable	No.
Animable	Sí. La propiedad es animable.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	object.style.gridTemplateAreas = '"item1 item1 . ." "item1 item1 . ."';

Sintaxis

Sintaxis de CSS grid-template-areas

css

grid-template-areas: none | itemnames | initial | inherit;

Ejemplo de la propiedad grid-template-areas:

Ejemplo de código CSS grid-template-areas

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: header;
      }
      .box2 {
        grid-area: menu;
      }
      .box3 {
        grid-area: main;
      }
      .box4 {
        grid-area: right;
      }
      .box5 {
        grid-area: footer;
      }
      .grid-container {
        display: grid;
        grid-template-areas: "header header header header header header" "menu main main main right right" "menu footer footer footer footer footer";
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-areas property example</h2>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Menu</div>
      <div class="box3">Main</div>
      <div class="box4">Right</div>
      <div class="box5">Footer</div>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

CSS grid-template-areas another

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

Otro ejemplo de código CSS grid-template-areas

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template-areas: "item1 item1 . . .";
        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-areas 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	Probarlo
none	No se definirán áreas de cuadrícula con nombre. Este es el valor predeterminado de esta propiedad.	Probarlo »
itemnames	Una secuencia de cadenas entre comillas que especifican las áreas de la cuadrícula.	Probarlo »

Práctica

¿Para qué se utiliza la propiedad 'grid-template-areas' en CSS?

Se utiliza para especificar un diseño para los elementos en una cuadrícula.Se utiliza para crear una imagen de fondo para una página web.Se utiliza para definir un patrón de áreas de cuadrícula con nombre a las que se hace referencia desde la propiedad 'grid-area' de un elemento de la cuadrícula.Se utiliza para alterar el color del texto en una página web.

Propiedad CSS grid-template-areas ​

Sintaxis ​

Ejemplo de la propiedad grid-template-areas: ​

Resultado ​

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

Valores ​