W3docs
it
Accedi

Proprietà CSS grid-area

La proprietà CSS grid-area definisce le dimensioni e la posizione degli elementi nelle righe del contenitore grid. Vedi esempi e provali.

La proprietà grid-area viene utilizzata per specificare le dimensioni e la posizione dell'elemento grid all'interno del contenitore grid. È una proprietà abbreviata per le seguenti proprietà, applicate nell'ordine: row-start, column-start, row-end, column-end:

  • grid-row-start, che specifica la riga in cui l'elemento deve iniziare.
  • grid-column-start, che specifica la colonna in cui l'elemento deve iniziare.
  • grid-row-end, che specifica la riga in cui l'elemento deve terminare.
  • grid-column-end, che specifica la colonna in cui l'elemento deve terminare.

La proprietà grid-area specifica anche un nome a un elemento grid. Gli elementi grid con nome possono poi essere referenziati dalla proprietà grid-template-areas del contenitore grid.

Valore inizialeauto / auto / auto / auto
Si applica aElementi grid.
EreditataNo.
AnimabileNo.
VersioneCSS Grid Layout Module Level 1
Sintassi DOMelement.style.gridArea = "1 / 2 / span 2 / span 3";

Sintassi

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

Nota: La proprietà abbreviata accetta da 1 a 4 valori. Se vengono forniti meno di 4 valori, i valori mancanti assumono il valore predefinito auto. La parola chiave span può essere usata per i valori finali (es. span 2).

Esempio

<!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>
Provalo tu stesso »

Risultato

Proprietà CSS grid-area

Nell'esempio seguente, all'elemento box1 viene assegnato il valore itemname, che si estende su tutte e cinque le colonne definite nel template grid. Si noti che poiché il grid definisce solo 5 colonne, gli elementi rimanenti vengono automaticamente posizionati nella riga successiva (posizionamento implicito nel grid).

È possibile posizionare un elemento anche tramite i numeri di linea del grid anziché un nome. I quattro valori seguono l'ordine row-start / column-start / row-end / column-end, e la parola chiave span indica all'elemento quante tracce deve coprire. Nell'esempio seguente, grid-area: 1 / 1 / 3 / 3; fa sì che l'elemento inizi dalla prima riga e colonna e termini alla terza linea di riga e colonna, coprendo quindi un'area 2×2.

Esempio con numeri di linea del grid

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

Esempio con valore 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>
Provalo tu stesso »

Valori

ValoreDescrizione
<grid-line>Specifica la linea del grid in cui l'elemento inizia o termina. Accetta un numero, span <number>, o auto.
custom-identSpecifica un nome per l'elemento (usato con grid-template-areas).
initialImposta la proprietà al suo valore predefinito.
inheritEredita la proprietà dall'elemento genitore.

Esercitazione

Pratica
Qual è lo scopo della proprietà CSS 'grid-area'?
Qual è lo scopo della proprietà CSS 'grid-area'?
Was this page helpful?