Propiedad grid-area de CSS

La propiedad grid-area se utiliza para especificar el tamaño y la ubicación del elemento de la cuadrícula dentro del contenedor de la cuadrícula. Es una propiedad abreviada para las siguientes propiedades, aplicadas en el siguiente orden: row-start, column-start, row-end, column-end:

grid-row-start, que especifica la fila en la que debe comenzar el elemento.
grid-column-start, que especifica la columna en la que debe comenzar el elemento.
grid-row-end, que especifica la fila en la que debe terminar el elemento.
grid-column-end, que especifica la columna en la que debe terminar el elemento.

La propiedad grid-area también asigna un nombre a un elemento de la cuadrícula. Luego, los elementos con nombre pueden ser referenciados por la propiedad grid-template-areas del contenedor de la cuadrícula.

Valor inicial	auto / auto / auto / auto
Se aplica a	Elementos de la cuadrícula.
Heredable	No.
Animable	No.
Versión	CSS Grid Layout Module Level 1
Sintaxis DOM	element.style.gridArea = "1 / 2 / span 2 / span 3";

Sintaxis

css

grid-area: <grid-line> / <grid-line> / <grid-line> / <grid-line> | <custom-ident> | initial | inherit;

Nota: La propiedad abreviada acepta de 1 a 4 valores. Si se proporcionan menos de 4 valores, los valores faltantes toman auto por defecto. La palabra clave span se puede utilizar para los valores finales (por ejemplo, span 2).

Ejemplo

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: header;
      }
      .box2 {
        grid-area: left;
      }
      .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' 'left main main main right right' 'left footer footer footer footer footer';
        gap: 5px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-area property example</h2>
    <p>You can use the grid-area property to name grid items.</p>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Left</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-area Property

En el siguiente ejemplo, el elemento box1 se asigna el valor itemname, que abarca las cinco columnas definidas en la plantilla de la cuadrícula. Tenga en cuenta que, dado que la cuadrícula solo define 5 columnas, los elementos restantes fluyen automáticamente a la siguiente fila (colocación implícita en la cuadrícula).

Ejemplo con el valor itemname

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: itemname;
      }
      .grid-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-areas: 'itemname itemname itemname itemname itemname';
        gap: 5px;
        background-color: #8ebf42;
        padding: 5px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-area property example</h2>
    <div class="grid-container">
      <div class="box1">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
`<grid-line>`	Especifica la línea de la cuadrícula donde comienza o termina el elemento. Acepta un número, `span <número>`, o `auto`.
`custom-ident`	Especifica un nombre para el elemento (se usa con `grid-template-areas`).
`initial`	Establece la propiedad en su valor predeterminado.
`inherit`	Hereda la propiedad del elemento principal.

Práctica

¿Cuál es el propósito de la propiedad CSS 'grid-area'?

Especificar el tamaño y la ubicación de un elemento de la cuadrícula dentro de la cuadrículaDefinir la plantilla de la cuadrícula para un elemento HTMLEstablecer el espacio entre las columnas de la cuadrículaEstablecer las propiedades de margen en CSSPosicionar un elemento en una celda o área específica

Propiedad grid-area de CSS ​

Sintaxis ​

Ejemplo ​

Resultado ​

Ejemplo con el valor itemname ​

Valores ​