grid-template-rows

Die CSS-Eigenschaft grid-template-rows ist Teil der CSS Grid Layout-Spezifikation und definiert die Zeilen eines Grid-Containers, indem die Größe der Grid-Tracks und deren Zeilennamen festgelegt werden.

.app-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Bevor wir uns mit der Eigenschaft grid-template-rows befassen, sollten wir den Unterschied zwischen Grid-Linien und Grid-Tracks klären. Grid-Linien beziehen sich auf die Namen der Linien, die die Spalten und Zeilen des Grids definieren. Grid-Tracks beziehen sich auf die Länge des Raums zwischen den Grid-Linien.

Syntax

grid-template-rows: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

where:
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat>
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> = [ <line-names> | <name-repeat> ]+

where:
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <integer [1,∞]> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

where:
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>

• Initialwert: none
• Gilt für: Grid-Container
• Vererbt: nein
• Berechneter Wert: Wie angegeben, jedoch mit relativen Längen, die in absolute Längen umgewandelt wurden
• Animationstyp: einfache Liste von Längen, Prozentwerten oder calc, vorausgesetzt, die einzigen Unterschiede liegen in den Werten der Längen-, Prozent- oder calc-Komponenten der Liste.

Werte

/* Keyword value */
grid-template-rows: none;

/* <track-list> values */
grid-template-rows: 200px 1fr 180px;
grid-template-rows: [linename col1] 250px [line2];
grid-template-rows: [sidebar] 1fr [content] 2fr;
grid-template-rows: fit-content(50%);
grid-template-rows: minmax(200px, 1fr) minmax(100px, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-rows: subgrid;
grid-template-rows: masonry;

/* <auto-track-list> values */
grid-template-rows: 100px repeat(auto-fill, 100px) 200px;
grid-template-rows: 100px repeat(2, 1fr auto) 200px repeat(3, 5fr);
grid-template-rows: minmax(150px, max-content) repeat(auto-fill, 180px) 15%;
grid-template-rows: [col1] 100px [col1-end] repeat(auto-fit, [line3] 400px);

/* Global values */
grid-template-rows: inherit;
grid-template-rows: initial; /* same as `none` */
grid-template-rows: revert;
grid-template-rows: unset;

none

Dies ist der Standardwert. Der Wert none bedeutet, dass grid-template-rows keine expliziten Grid-Tracks generiert, was wiederum bedeutet, dass Zeilen implizit generiert werden (d. h. für Sie erstellt, ohne dass Sie sie explizit definieren müssen) und die Track-Größe durch die Eigenschaft grid-auto-rows definiert wird.

Beachten Sie, dass grid-template-rows nicht der einzige Weg ist, explizite Grid-Zeilentracks zu erstellen. Dies kann auch über die Eigenschaft grid-template-areas erfolgen, die Grid-Bereiche mit benutzerdefinierten Namen (z. B. sidebar, main usw.) ermöglicht.

Der Unterschied zwischen impliziten und expliziten Grids wird in diesem Beitrag von Manuel Matuzovic gut zusammengefasst.

<length>

Dieser Wert kann jede gültige und nicht-negative CSS-Länge sein, wie z. B. px, em und rem, unter anderem, um die Track-Größe (d. h. die Höhe) der Zeile anzugeben.

<percentage>

Dies ist ein nicht-negativer Wert, der sich auf die innere Inline-Größe des Grid-Containers bezieht. Wenn die Größe des Grid-Containers von der Größe seiner Tracks abhängt, dann muss die Prozentangabe genauso behandelt werden, als würde auto deklariert.

Ein Nachteil bei der Verwendung eines Prozentwerts ist, dass, wenn Sie Abstände zwischen den Tracks hinzufügen, die Größe der Abstände zur Größe der Tracks hinzugefügt wird, was zu einem Überlauf führen kann. Verwenden Sie die fr-Einheit oder das Schlüsselwort auto, um die Tracks zu größenmäßig festzulegen und dies zu verhindern.

<flex>

Dies ist ein nicht-negativer Wert, der in fr-Einheiten ausgedrückt wird. Er ermöglicht es Ihnen, flexible Grid-Tracks zu erstellen, indem Sie die Größe eines Tracks als Bruchteil des verfügbaren Platzes im Grid-Container angeben. Auf diese Weise ändern sich die Zeilen mit der Höhe des Grids, was zu einem reaktionsfähigeren Grid führt.

Betrachten Sie zum Beispiel einen dreizeiligen Grid-Container, der 900px hoch ist. Nehmen wir an, die Höhe der ersten (oberen) Zeile ist fest (d. h. sie ändert sich nicht) auf 300px, während die zweite Zeile eine fraktionale Einheit (1fr) einnimmt und die dritte Zeile zwei fraktionale Einheiten (2fr) beträgt.

.grid {
  display: grid;
  height: 900px;
  grid-template-rows: 300px 1fr 2fr;
}

Die zweiten beiden Zeilen sind fraktional, daher nehmen sie den verbleibenden verfügbaren Platz ein. Und in diesem Fall ist der verfügbare Platz das, was übrig bleibt, nachdem die feste Höhe von 300px der ersten Zeile berücksichtigt wurde. Danach teilen sich die zweiten beiden Zeilen den Rest, je nachdem, wie viele Fraktionen sie erhalten.

In diesem Beispiel ist der verbleibende und verfügbare Platz 600px (d. h. 900px minus 300px). Die zweite Zeile erhält eine Fraktion (1fr) dieses Platzes und die dritte Zeile erhält zwei Fraktionen (2fr). Lassen Sie uns einen Moment lang rechnen, um die Höhe einer Fraktion von 600px zu ermitteln.

1fr = ([Grid Container Height] - [Fixed Row Height]) / [Sum of the flex factors]
1fr = (900px - 300px) / 3
1fr = 600px / 3
1fr = 200px

Aha! Eine Fraktion ist 200px. Und da die zweite Zeile 1fr ist, muss sie ebenfalls 200px sein. Das lässt uns mit 400px verfügbarem Platz (900px – 300px – 200px), was zufällig doppelt so groß ist wie die zweite Zeile.

Aber warten Sie! Da gibt es noch mehr.

Denken Sie daran, dass ein Grid alle zwischen den Grid-Tracks hinzugefügten Lücken berücksichtigt, wenn es berechnet, wie viel Platz für die fraktionalen Zeilen zur Verfügung steht. Der Vorteil ist natürlich, dass unsere Zeilen niemals den Grid-Container überlaufen werden.

Fügen wir dem vorherigen Beispiel einen Abstand hinzu.

.grid {
  display: grid;
  height: 900px;
  grid-template-rows: 300px 1fr 2fr;
  gap: 15px;
}

Auch wenn wir hier einmal einen Abstand deklariert haben, ist es tatsächlich so, als hätten wir zwei Abstände deklariert. Das liegt daran, dass sich zwischen jeder Zeile ein 15px großer Abstand befindet (einer zwischen Zeile 1 und Zeile 2 und ein weiterer zwischen Zeile 2 und Zeile 3). Das bedeutet, wir haben 30px Abstand in unserem Grid, die in den verfügbaren Platz einbezogen werden müssen.

1fr = ([Grid Container Height] - [Gaps] - [Fixed Row Height]) / [Sum of the flex factors]
1fr = (900px - 30px - 300px) / 3
1fr = 570px / 3
1fr = 190px

Ich weiß nicht, wie es Ihnen geht, aber ich mache nicht gerne viel manuelle Mathematik. Das ist es, was CSS Grid so großartig macht – es kümmert sich um alles!

minmax(min, max)

Die Funktion minmax() akzeptiert zwei Argumente: einen minimalen Längenwert und einen maximalen Längenwert. Und das sagt einem Grid-Container, dass die grid-template-rows nicht kürzer als der Mindestwert und nicht höher als der Höchstwert sein können. Unser Leitfaden zu CSS-Funktionen enthält eine gründlichere, detaillierte Erklärung, wie die Funktion funktioniert.

Nehmen Sie das folgende Beispiel

grid-template-rows: 200px minmax(100px, 400px);

Hier gibt es zwei Zeilen: eine, die 200px hoch ist, und eine andere, die als minmax(100px, 400px) ausgedrückt wird. Sieht seltsam aus, richtig? Aber das bedeutet nur, dass die zweite Zeile mindestens 100px Platz einnehmen muss, aber nicht mehr als 400px.

Einfacher ausgedrückt: Solange mehr als 100px verfügbarer Platz vorhanden ist, kann die zweite Zeile bis zu 400px flexibel sein, muss aber dort stoppen. Andernfalls ist die Zeile 100px hoch.

Die Argumente min und max akzeptieren alle folgenden Werte, mit der Ausnahme, dass der min-Wert kein Flex-Wert sein kann (z. B. 1fr)

<length-percentage> | <flex> | min-content | max-content | auto

Daher ist dies ungültig, da der min-Wert ein Flex-Wert ist

/* 👎 */
grid-template-rows: minmax(1fr, 500px) 3fr;

Aber diese sind völlig gültig

/* 👍 */
grid-template-rows: minmax(auto, 1fr) 3fr;
grid-template-rows: minmax(200%, 1fr) 1fr;

auto

Das Schlüsselwort auto verhält sich in den meisten Fällen ähnlich wie minmax(min-content, max-content).

Da auto-Track-Größen durch die Eigenschaften align-content und justify-content gedehnt werden können, nehmen sie standardmäßig jeden verbleibenden Platz im Grid-Container ein auto-matisch. Allerdings können auto-Track-Größen einen Kampf gegen fr-Einheiten bei der Zuweisung des verbleibenden Platzes nicht gewinnen – sie passen sich an die maximale Größe ihres Inhalts an.

Schauen Sie sich das Ergebnis dieser beiden Track-Beispiele an

grid-template-rows: auto auto auto;
grid-template-rows: auto 1fr auto;

Wenn alle drei Zeilen auf auto gesetzt sind (was wir auch als repeat(3, auto) hätten schreiben können – aber dazu später mehr), teilen sie sich einfach gleichen Platz. Aber wenn wir in der Mitte eine fraktionale Einheit als zweite Zeile einfügen, sind die auto-Zeilen nur so hoch wie der Inhalt darin und die 1fr-Zeile nimmt den verbleibenden Platz ein.

min-content

Das Schlüsselwort min-content repräsentiert die kleinstmögliche Fläche, die ein Element in einem Grid-Container einnehmen kann, ohne dass sein Inhalt überläuft. Der Inhalt kann Text, Bilder oder Videos sein.

Nehmen wir an, der Inhalt ist „CSS is awesome.“ Wenn dieser in vertikalem Modus geschrieben wird, ist min-content die Breite des Wortes „awesome“, da dies der breiteste Teil des Inhalts ist (breiter als „CSS“ und „is“). Wenn die Zeile schmaler wird, beginnt der Text, den Container zu überlaufen.

Im Code sieht das so aus

.grid {
  display: grid;
  grid-template-rows: min-content 1fr;
  gap: 1rem;
}

.grid-item {
  writing-mode: vertical-rl;
}

…was zu etwas wie diesem führt

max-content

Das Schlüsselwort max-content repräsentiert die kleinste erforderliche Größe, damit ein Element seinen gesamten Inhalt aufnehmen kann, ohne umbrochen oder überlaufen zu werden. Ein Name, der „max“ enthält, lässt es so aussehen, als würden wir mit einer maximalen Größe zu tun haben, daher kann dieser Wert ein wenig rätselhaft sein.

Wenn wir unser min-content-Beispiel von oben wieder aufgreifen, wächst ein Grid-Track mit dem Größenwert max-content, bis sein Inhalt in eine einzige Zeile passt. Im Fall von „CSS ist fantastisch“ ist max-content so viel Platz, wie diese drei Wörter zusammen auf einer Zeile einnehmen.

.grid {
  display: grid;
  grid-template-rows: max-content 1fr;
  gap: 1rem;
}

fit-content( <length-percentage> )

Die Funktion fit-content() (es gibt eine solide Erklärung dazu in unserem Leitfaden zu CSS-Funktionen) nutzt den verfügbaren Platz und akzeptiert einen prozentualen oder Längenwert als maximale Größe für einen Grid-Track, wobei sichergestellt wird, dass der Track niemals über den max-content hinausgeht und niemals unter ein Minimum schrumpft. Das Minimum ist oft, aber nicht immer, gleich dem min-content.

.grid {
  display: grid;
  grid-template-rows: fit-content(400px) fit-content(400px) 1fr;
  gap: 1rem;
}

In der folgenden Abbildung überschreitet die erste Zeile nicht ihre max-content-Größe (d. h. die Breite der Wörter „fit-content(400px)“ in einer einzigen Zeile) – sie dehnt sich nur aus, um ihren Inhalt aufzunehmen. Die zweite Zeile hat jedoch viel mehr Inhalt und hört auf, sich auszudehnen, sobald sie eine Höhe von 400px erreicht, was das Limit der Funktion ist.

[Zeilenname]

Obwohl Grid-Linien immer mit einer impliziten numerischen Bezeichnung bezeichnet werden können, können wir ihnen auch benutzerdefinierte Namen geben, um den Code in einem komplizierteren Grid leichter verständlich zu machen. Jeder Zeilenname kann dann bei der Positionierung von Grid-Items anhand von Zeilennamen referenziert werden.

Grid-Linien können mehrere Namen haben, indem Namen in eckigen Klammern hinzugefügt und jeweils durch ein Leerzeichen getrennt werden.

grid-template-rows: [first header-start] 100px [header-end content-start] 1fr [lastline];

Beachten Sie, dass ein Zeilenname ein <custom-ident> ist, ein generischer Datentyp, der jede gültige CSS-Kennung darstellt, die nicht missinterpretiert werden kann als ein vordefiniertes Schlüsselwort in der Wertdefinition dieser Eigenschaft. Wir können eine Zeile also super-awesome-spider-monkey nennen, solange sie keine globalen CSS-Werte enthält, die Konflikte verursachen könnten, wie z. B. span, auto, inherit, initial und so weiter.

Solche Bezeichner sind außerdem vollständig Groß- und Kleinschreibung-sensitiv. Zum Beispiel behandelt CSS sidebar-end und Sidebar-Name als zwei völlig unterschiedliche, nicht zusammenhängende Zeilennamen. Zeilennamen können auch explizit mit der Eigenschaft grid-template-rows zugewiesen werden oder implizit durch benannte Grid-Bereiche mit der Eigenschaft grid-template-areas zugewiesen werden.

repeat([ <positive-integer> | auto-fill | auto-fit ] , <track-list>)

Die Funktion repeat() ist eine effiziente Methode, um grid-template-rows zu definieren, wenn die Zeilen gleich sind. Die Funktion nimmt die Anzahl der Zeilen und dann die Zeilengröße.

/* Writing this */
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

/* is the same as this: */
grid-template-rows: repeat(5, 1fr);

Ein weiteres Beispiel, diesmal aus der Spezifikation.

grid-template-rows: 10px [row-start] 250px [row-end]
                       10px [row-start] 250px [row-end]
                       10px [row-start] 250px [row-end]
                       10px [row-start] 250px [row-end] 10px;

/* same as above, except easier to write */
grid-template-rows: repeat(4, 10px [row-start] 250px [row-end]) 10px;

auto-fill und auto-fit

Neben einer Ganzzahl, die die Anzahl der Wiederholungen angibt, sind auch die beiden Schlüsselwörter auto-fill und auto-fit als erstes Argument der Funktion repeat() zulässig.

Diese Schlüsselwörter eignen sich besser für Spaltentracks als für Zeilentracks, aber sehen wir uns an, wie sie sich verhalten, wenn sie auf grid-template-rows angewendet werden.

Wenn auto-fill und auto-fit als Anzahl der Wiederholungen angegeben werden und der Grid-Container eine definierte Höhe oder maximale Höhe hat, dann ist die Anzahl der Wiederholungen die größte mögliche Ganzzahl, die nicht dazu führt, dass das Grid den Inhaltsbereich seines Grid-Containers überläuft; wenn eine Anzahl von Wiederholungen überläuft, dann gibt es eine Wiederholung.

Wenn der Grid-Container hingegen eine definierte Mindesthöhe hat, ist die Anzahl der Wiederholungen die kleinste mögliche Ganzzahl, die diese Mindestanforderung erfüllt. Andernfalls wiederholt sich die angegebene Track-Liste nur einmal.

Wie Sie in den folgenden Beispielen sehen können, wenn keine explizite Höhe für den Grid-Container definiert ist, gelten diese Schlüsselwörter nur für den ersten Zeilen-Track; andernfalls gelten sie für die maximale Anzahl von Zeilen, die in die explizite Höhe passen, und die, die überlaufen, erhalten eine auto-Größe.

Es gibt ein paar Einschränkungen bei der Verwendung der Funktion repeat(), die erwähnenswert sind.

• Es ist nicht möglich, eine repeat()-Funktion innerhalb einer repeat()-Funktion zu verschachteln.

/* This is invalid */
grid-template-rows: repeat(4, 1fr repeat(5, 1fr));

• Es akzeptiert keine intrinsischen oder flexiblen Längeneinheiten (z. B. fr-Einheiten) bei Verwendung von auto-fill oder auto-fit. Es akzeptiert nur eine explizite Track-Größe, damit es die Anzahl der Zeilen berechnen kann, die in den Grid-Container passen.

/* This is invalid */
grid-template-rows: repeat(auto-fit, 1fr);

• Es ist jedoch in Ordnung, intrinsische oder flexible Größen als zweiten Wert der Funktion zu verwenden, solange der erste Wert eine positive Zahl ist.

/* These are invalid */
grid-template-rows: repeat(auto-fit, 1fr);
grid-template-rows: repeat(min-content, 1fr);

/* This is valid */
grid-template-rows: repeat(6, 1fr);

• Es kann nur einmal in der grid-template-rows Track-Liste verwendet werden, wenn auto-fill oder auto-fit verwendet wird. Wir können jedoch mehrere repeat()-Funktionen verwenden, solange der zweite Wert fest ist.

/* These are invalid */
grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(auto-fill, minmax(5rem, auto));
grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(3, 1fr);

/* This is valid */
grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr)) 100px repeat(3, 200px);

subgrid

Kann ein Grid innerhalb eines Grids liegen? Natürlich können wir das! Das ist dank des Schlüsselworts subgrid möglich. Wenn Sie dies deklarieren, kann das innere (Kind-)Grid die Linien des äußeren (Eltern-)Grids teilen, was konsistentere Linien ermöglicht, ohne sie alle neu deklarieren zu müssen.

Subgrid gilt als experimentell und wird zum Zeitpunkt des Schreibens nur in Firefox unterstützt.

Nehmen wir also an, wir haben ein Grid in einem Grid.

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
}
.grid-container .grid-item {
  display: grid;  
}

Wir können dieses verschachtelte Grid zu einem subgrid machen, um die Linien mit dem übergeordneten Grid zu teilen.

.grid-container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 1rem;
}
.grid-container .grid-item {
  display: grid;  
  grid-template-rows: subgrid;
}

Nun werden die Elemente des Kind-Grids entsprechend der Track-Größe des Haupt-Grid-Containers platziert und dimensioniert. Betrachten Sie zum Beispiel das folgende HTML.

<div class="grid">
  <div class="item"></div>

  <div class="item subgrid">
    <div class="subitem"></div>
    <div class="subitem"></div>
  </div>

  <div class="item"></div>
  <div class="item"></div>
</div>

Machen wir nun ein Subgrid.

 .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Establish a grid with 4 columns */
  grid-template-rows: repeat(4, 1fr); /* Establish a grid with 4 rows */
}
.item {  
  grid-row: 1/-1; /* Make all items as tall as the 4 tracks */
}
.subgrid {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 3/-1; /* Make the subgrid item size, half of the other items */
}

Hier sehen Sie, dass sich die Subgrid-Elemente an die Track-Größe des übergeordneten Grids anpassen.

Die Abstände in einem Subgrid werden vom übergeordneten Element geerbt, können aber mit einem anderen gap-Wert auf dem Subgrid-Element überschrieben werden.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1rem; /* This is inherited by the child grid */
}
.grid-container .grid-item {
  display: grid;  
  grid-template-rows: subgrid;
  gap: 0.5rem; /* This overrides the parent grid's gap */
}

Ein Subgrid hat seine eigenen Zeilennummern. Wenn Sie beispielsweise die Zeilennummer 1 in Ihrem Subgrid verwenden, verweist diese auf die erste Zeile des Kind-Grids, nicht auf die des übergeordneten. Selbst wenn ein Subgrid an der dritten Linien-Spur des übergeordneten Grids beginnt, ist die erste Linien-Spur des Subgrids immer noch 1 und nicht 3.

Und natürlich können wir auch benutzerdefinierte Grid-Zeilennamen in einem Subgrid deklarieren.

.grid-container .grid-item {
  display: grid;  
  grid-template-rows: subgrid [header-start] [header-end] [main-start] [main-last];
}

Und wir können hier auch die Funktion repeat() verwenden, um Zeilennamen anzugeben.

.grid-container .grid-item {
  display: grid;  
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: subgrid repeat(2, [a] 1fr [b]);
}

Eine Sache, die man dabei beachten muss, ist, dass die Funktion repeat() nebeneinander liegende Zeilennamen zusammenführt.

/* These are equivalent */
grid-template-rows: repeat(2, [a] 1fr [b]);
grid-template-rows: [a] 1fr [b a] 1fr [b];

Beachten Sie, dass in einem Subgrid keine impliziten Tracks in dieser Dimension vorhanden sein können. Wenn Sie also mehr Grid-Elemente hinzufügen, werden diese in den vorhandenen expliziten Tracks des Subgrids platziert. Wenn Sie beispielsweise ein weiteres Kind zum Subgrid des vorherigen Beispiels hinzufügen, wird dieses Kind unter dem letzten Track platziert.

masonry

Sie wissen, was wir mit Masonry meinen, oder? Das ist dieses coole Layout, bei dem Elemente in einem Grid so angeordnet sind, dass sie basierend auf dem vertikalen Platz, der in einer Spalte verfügbar ist, zusammengefügt werden. Es wurde vor Jahren durch David DeSandro's JavaScript-Bibliothek mit demselben Namen populär.

Dank CSS Grid wird Masonry etwas sein, das wir ohne JavaScript umsetzen können. Zum Zeitpunkt des Schreibens ist es jedoch noch ein weiter Weg als Teil der Level 3 der CSS Grid-Spezifikation, die sich derzeit im Editor's Draft befindet. Sie ist jedoch in Firefox hinter einem Flag verfügbar.

Wir werden wahrscheinlich Änderungen in der Spezifikation sehen, bis sie tatsächlich veröffentlicht wird. Aber hier ist, wie sie derzeit aussieht.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

Beispiele

Hurra, Demo-Zeit! Ich habe ein paar Beispiele, die die Stärken der Eigenschaft grid-template-rows demonstrieren, auf die Sie bei der Arbeit mit einem CSS Grid-Layout wahrscheinlich stoßen werden.

App-Layout

Ein einfaches App-Layout kann mit dem folgenden CSS erreicht werden.

.layout {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
}

Seitenmenü

Masonry

Browser-Unterstützung

Weitere Informationen

• CSS Grid Layout Module Level 2 (führt subgrid ein)
• CSS Grid Layout Module Level 3 (führt den Wert masonry ein)
• A Complete Guide to CSS Grid (CSS-Tricks)
• The Difference Between Explicit and Implicit Grids (Manuel Matuzovic)

Verwandte Tricks!

Artikel vom 9. Feb. 2018

Zählen mit CSS-Zählern und CSS Grid

Preethi

Artikel vom 6. Jun. 2017

Ausbrechen mit CSS Grid erklärt

Geoff Graham

Artikel vom 24. Jun. 2019

Einen Konferenzplan mit CSS Grid erstellen

Mark Root-Wiley

Artikel vom 18. Okt. 2021

Erweiterbare Abschnitte innerhalb eines CSS Grid

Kev Bonett

Artikel vom 10. Dez. 2021

Verwenden von `position: sticky` mit CSS Grid

Chris Coyier

Artikel am 8. Juni 2021

Sechsecke und darüber hinaus: Flexible, reaktionsschnelle Grid-Muster, ohne Media Queries

Temani Afif

Verwandt

Almanach am 28. Juli 2021

align-content

.element { align-content: space-around; }

align-content flexbox

34 Cross

Almanach am 15. Okt. 2021

display

.element { display: inline-block; }

display

Sara Cope

Almanac am 22. September 2022

gap

.element { gap: 20px 30px; }

Mojtaba Seyedi

Almanac am 26. Mai 2022

grid-template-areas

.element { grid-template-areas: "header header" "sidebar main"; }

Mojtaba Seyedi

Almanac am 20. Mai 2022

grid-template-columns

.element { grid-template-columns: 300px 1fr; }

Mojtaba Seyedi

Almanac am 22. September 2022

justify-content

.element { justify-content: center; }

34 Cross

Almanach am 30. Aug. 2021

row-gap

.element { row-gap: 2rem; }

Geoff Graham