W3docs
es
Iniciar sesión

Propiedad CSS grid-area

La propiedad CSS grid-area define el tamaño y la ubicación de los elementos dentro de las filas en el contenedor de cuadrícula. Ver ejemplos y pruébalos.

La propiedad grid-area se utiliza para especificar el tamaño y la ubicación del elemento de cuadrícula dentro del contenedor de cuadrícula. Es una propiedad abreviada para las siguientes propiedades, aplicadas en el 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 permite asignar un nombre a un elemento de cuadrícula. Los elementos de cuadrícula con nombre pueden referenciarse mediante la propiedad grid-template-areas del contenedor de cuadrícula.

Valor inicialauto / auto / auto / auto
Se aplica aElementos de cuadrícula.
HeredableNo.
AnimableNo.
VersiónCSS Grid Layout Module Level 1
Sintaxis DOMelement.style.gridArea = "1 / 2 / span 2 / span 3";

Sintaxis

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

Nota: La forma abreviada acepta de 1 a 4 valores. Si se proporcionan menos de 4 valores, los valores faltantes se establecen como auto. La palabra clave span puede usarse para los valores finales (p. ej., span 2).

Ejemplo

<!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>
Pruébalo tú mismo »

Resultado

CSS grid-area Property

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

También es posible posicionar un elemento mediante números de línea de cuadrícula en lugar de un nombre. Los cuatro valores siguen el orden row-start / column-start / row-end / column-end, y la palabra clave span indica al elemento cuántas pistas debe cubrir. En el ejemplo a continuación, grid-area: 1 / 1 / 3 / 3; hace que el elemento comience en la primera fila y columna y termine en la tercera línea de fila y columna, cubriendo un área de 2×2.

Ejemplo con números de línea de cuadrícula

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        /* row-start / column-start / row-end / column-end */
        grid-area: 1 / 1 / 3 / 3;
        background-color: #8ebf42;
      }
      .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 60px;
        gap: 5px;
        background-color: #555;
        padding: 5px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Placing an item with line numbers</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>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Ejemplo con valor itemname

<!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>
Pruébalo tú mismo »

Valores

ValorDescripción
<grid-line>Especifica la línea de cuadrícula donde el elemento comienza o termina. Acepta un número, span <number> o auto.
custom-identEspecifica un nombre para el elemento (se usa con grid-template-areas).
initialEstablece la propiedad a su valor predeterminado.
inheritHereda la propiedad del elemento padre.

Práctica

Práctica
¿Cuál es el propósito de la propiedad CSS 'grid-area'?
¿Cuál es el propósito de la propiedad CSS 'grid-area'?
Was this page helpful?