W3docs
de
Anmelden

CSS grid-area Eigenschaft

Die CSS-Eigenschaft grid-area definiert die Größe und Position von Grid-Elementen innerhalb des Grid-Containers. Mit Beispielen zum Ausprobieren.

Die Eigenschaft grid-area wird verwendet, um die Größe und Position eines Grid-Elements innerhalb des Grid-Containers festzulegen. Sie ist eine Kurzschreibweise für die folgenden Eigenschaften, die in dieser Reihenfolge angewendet werden: row-start, column-start, row-end, column-end:

Die Eigenschaft grid-area weist einem Grid-Element auch einen Namen zu. Benannte Grid-Elemente können dann von der Eigenschaft grid-template-areas des Grid-Containers referenziert werden.

Anfangswertauto / auto / auto / auto
Anwendbar aufGrid-Elemente.
VererbbarNein.
AnimierbarNein.
VersionCSS Grid Layout Module Level 1
DOM-Syntaxelement.style.gridArea = "1 / 2 / span 2 / span 3";

Syntax

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

Hinweis: Die Kurzschreibweise akzeptiert 1 bis 4 Werte. Werden weniger als 4 Werte angegeben, wird für fehlende Werte auto verwendet. Das Schlüsselwort span kann für die Endwerte verwendet werden (z. B. span 2).

Beispiel

<!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>
Probier es selbst »

Ergebnis

CSS grid-area Eigenschaft

Im folgenden Beispiel wird dem Element box1 der Wert itemname zugewiesen, der alle fünf im Grid-Template definierten Spalten umspannt. Da das Grid nur 5 Spalten definiert, werden die verbleibenden Elemente automatisch in die nächste Zeile verschoben (implizite Grid-Platzierung).

Es ist auch möglich, ein Element anhand von Grid-Liniennummern statt eines Namens zu platzieren. Die vier Werte folgen der Reihenfolge row-start / column-start / row-end / column-end, und das Schlüsselwort span gibt an, wie viele Tracks das Element überdecken soll. Im folgenden Beispiel bewirkt grid-area: 1 / 1 / 3 / 3;, dass das Element an der ersten Zeile und Spalte beginnt und an der dritten Zeile und Spalte endet, wodurch es einen 2×2-Bereich belegt.

Beispiel mit Grid-Liniennummern

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

Beispiel mit itemname-Wert

<!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>
Probier es selbst »

Werte

WertBeschreibung
<grid-line>Gibt die Grid-Linie an, an der das Element beginnt oder endet. Akzeptiert eine Zahl, span <number> oder auto.
custom-identGibt einen Namen für das Element an (wird mit grid-template-areas verwendet).
initialSetzt die Eigenschaft auf ihren Standardwert.
inheritErbt die Eigenschaft vom übergeordneten Element.

Übung

Übung
Wozu dient die CSS-Eigenschaft 'grid-area'?
Wozu dient die CSS-Eigenschaft 'grid-area'?
Was this page helpful?