CSS grid-Eigenschaft

Die CSS-Eigenschaft grid ist eine Kurzschreibweise für die folgenden Eigenschaften:

In einer einzigen grid-Deklaration können Sie entweder explizite Grid-Eigenschaften (grid-template-rows, grid-template-columns, grid-template-areas) oder implizite Grid-Eigenschaften (grid-auto-rows, grid-auto-columns, grid-auto-flow) angeben. Die Kurzschreibweise ordnet diese Unter-Eigenschaften direkt zu, und alle ausgelassenen Unter-Eigenschaften werden auf ihre Anfangswerte zurückgesetzt.

Anfangswert	`none`
Gilt für	Grid-Container.
Vererbt	Nein.
Animierbar	Ja. Das Grid-Layout ist animierbar.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	Object.style.grid = "150px / auto auto auto";

Syntax

Syntax der CSS grid-Eigenschaft

css

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> | initial | inherit;

Beispiel 1: Einfache Grid-Kurzschreibweise

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>

Try it Yourself »

Beispiel 2: Grid-Kurzschreibweise mit Auto-Flow

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow column auto auto auto;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS grid Property

Beispiel 3: Grid-Kurzschreibweise mit festen Zeilengrößen

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Testen
`none`	Die Größe der Spalten und Zeilen wird nicht festgelegt. Dies ist der Standardwert.
`grid-template-rows / grid-template-columns`	Legt die Größe der Zeilen und Spalten fest.	Testen »
`grid-template-areas`	Legt das Grid-Layout unter Verwendung benannter Grid-Bereiche fest.	Testen »
`grid-template-rows / [auto-flow && dense?] grid-auto-columns`	Legt Zeilengrößen fest und gibt Auto-Flow sowie dichte Platzierung für Spalten an.
`[auto-flow && dense?] grid-auto-rows / grid-template-columns`	Legt Spaltengrößen fest und gibt Auto-Flow sowie dichte Platzierung für Zeilen an.
`initial`	Setzt die Eigenschaft auf ihren Standardwert zurück.
`inherit`	Erbt die Eigenschaft vom Elternelement.

Praxis

Was können Sie mit CSS Grid Layout gemäß dem Inhalt der Seite erreichen?

Erstellung von Webseiten mit komplexen Designs, die responsiv und flexibel sind.Es erleichtert die Anordnung oder Ausrichtung von Elementen.Eliminiert die Notwendigkeit, externe Bibliotheken wie Bootstrap für Layout-Designs zu verwenden.Es kann nicht mit anderen Layout-Systemen kombiniert werden.Der grid-Container enthält das Grid und bietet verschiedene Eigenschaften, um sein Verhalten und seine äußere Begrenzung zu definieren.

CSS grid-Eigenschaft ​

Syntax ​

Beispiel 1: Einfache Grid-Kurzschreibweise ​

Beispiel 2: Grid-Kurzschreibweise mit Auto-Flow ​

Ergebnis ​

Beispiel 3: Grid-Kurzschreibweise mit festen Zeilengrößen ​

Werte ​

Praxis ​

CSS grid-Eigenschaft

Syntax

Beispiel 1: Einfache Grid-Kurzschreibweise

Beispiel 2: Grid-Kurzschreibweise mit Auto-Flow

Ergebnis

Beispiel 3: Grid-Kurzschreibweise mit festen Zeilengrößen

Werte

Praxis