CSS grid-row-end-Eigenschaft

Die CSS-Eigenschaft grid-row-end wird verwendet, um anzugeben, auf welcher Zeile die Anzeige des Elements beendet werden soll oder wie viele Zeilen das Element umfassen soll.

Hinweis: Das explizite Festlegen von width oder height für Grid-Elemente ist im Allgemeinen nicht erforderlich, da das Grid-Layout die Größe automatisch verwaltet.

Anfangswert	auto
Gilt für	Grid-Elemente.
Vererbbar	Nein.
Animierbar	Ja.
Version	CSS Grid Layout Module Level 1
DOM-Syntax	object.style.gridRowEnd = "4";

Syntax

CSS grid-row-end Syntax

css

grid-row-end: auto | grid-line | span n | inherit | initial | unset;

Beispiel für die grid-row-end-Eigenschaft:

CSS grid-row-end Codebeispiel

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: auto;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Ergebnis

CSS grid-row-end with multiple items

Hier wurde die Eigenschaft grid-row-end als „auto“ festgelegt. Im nächsten Beispiel werden drei Zeilen umspannt.

Beispiel für die grid-row-end-Eigenschaft mit dem Wert „span 3“:

CSS grid-row-end-Beispiel mit mehreren Elementen

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div class="box">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Werte

Wert	Beschreibung	Ausführen
auto	Es wird nur eine Zeile umspannt. Dies ist der Standardwert dieser Eigenschaft.	Ausführen »
span n	Gibt die Anzahl der umspannenden Zeilen an.	Ausführen »
grid-line	Gibt die Rasterlinie an, an der das Element endet.	Ausführen »
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft von ihrem übergeordneten Element.

Der Einfachheit halber können Sie auch die Kurzschreibweiseigenschaft grid-row verwenden, um Start- und Endlinie gleichzeitig festzulegen.

Praxis

Was bewirkt die CSS-Eigenschaft 'grid-row-end'?

Sie definiert die Linie, an der die Endseite eines Grid-Elements innerhalb des Rasters horizontal endet.Sie definiert die Linie, an der die Endseite eines Grid-Elements innerhalb des Rasters vertikal endet.Sie richtet die Elemente innerhalb des Rasters vertikal aus.Sie steuert den Abstand zwischen zwei Zeilen im Raster.

CSS grid-row-end-Eigenschaft ​

Syntax ​

Beispiel für die grid-row-end-Eigenschaft: ​

Ergebnis ​

Beispiel für die grid-row-end-Eigenschaft mit dem Wert „span 3“: ​

Werte ​