Warum verändert eine andere Reihenhöhe in der 4. Reihe die Reihenhöhenverteilung zwischen den ersten drei Reihen? ⇐ HTML

[Anonymous]

Ich habe ein Raster mit zwei Spalten und 4 Zeilen. Die Rasterbereiche sind wie folgt

Code: Select all

grid-template-areas:
"v p"
"v o"
"v t"
"m t";

Ich habe einen Artikel pro Bereich. Mein Element v (ein Video) oben links hat also eine relativ große Höhe und erstreckt sich über die ersten drei Zeilen. Links darunter befindet sich ein kleines Element mit fester Höhe m. Auf der rechten Seite habe ich zwei kleine Gegenstände mit fester Höhe p und o. Unten sollte das Element t die gesamte verbleibende Höhe von v plus die Höhe von m annehmen. Ich habe versucht, eine Zeilenhöhenverteilung einfach wie folgt anzugeben:

Code: Select all

grid-template-rows: repeat(4, min-content);

Meine Logik war: Um dem minimalen Inhalt gerecht zu werden, kann die erste Zeile auf die Höhe des Elements in p verkleinert werden, ebenso kann die zweite Zeile auf die Höhe des Elements in o verkleinert werden. Nur das dritte muss groß genug sein, um in das Video (Element in v) zu passen, und skaliert somit auch das Element in t (ein Transkript, das keine feste Höhe hat) entsprechend.
Das ist jedoch nicht der Fall. Stattdessen scheint die Videohöhe für die ersten drei Zeilen durch drei geteilt zu werden.
Wenn ich die Vorlage jedoch nur in der vierten (!) Zeile ändere, zu:

Code: Select all

grid-template-rows: repeat(3, min-content) 1fr;

Die Höhenverteilung in den ersten drei Reihen ist plötzlich so, wie ich es gerne hätte. Diese Änderung im Ergebnis macht für mich keinen Sinn.
Unten sind zwei Snippets, die bis auf die obigen Zeilen identisch sind.
Meine Frage ist: Kann ich die Höhenverteilung der ersten drei Zeilen wie im zweiten Snippet erreichen, aber die letzte Zeile nicht mit 1fr skalieren (was ich aus anderen Gründen nicht möchte)? Und wie lässt sich der Unterschied im Ergebnis zwischen den beiden Snippets erklären? Sieht für mich nach einem Fehler aus ...
Anmerkung: Die Lösung, nach der ich suche, sollte eine reine Grid-Lösung bleiben, d. h. einige der Elemente nicht in ein zusätzliches Div einpacken. Außerdem würde ich es vorziehen, die minimalen Höhen der Elemente nicht explizit in die Grid-Template-Rows-Definition zu schreiben, um diese Größen nicht an mehreren Stellen redundant zu haben.

Code: Select all

html, body {
height: 100vh;
max-height: 100vh;
margin: 0px;
}

/* Grid-Container */
#container {
display:grid;
grid-template-areas:
"v p"
"v o"
"v t"
"m t";
grid-template-columns: 1fr min-content;
grid-template-rows: repeat(4, min-content);
gap: 4px;
width:100%;
}

/* Grid-Items */
div.grid-item {
border-color: black;
border-width: 2px;
border-style: solid;
position: relative;
}

#video {
background-color: green;
height: 180px;
grid-area: v;
}
#metadata {
background-color: yellow;
height: 30px;
grid-area: m;
}
#previewSelect {
background-color: red;
height:30px;
grid-area: p;
}
#transcript {
background-color: blue;
align-self: stretch;
grid-area: t;
}
#optional {
height: 30px;
grid-area: o;
}

Code: Select all

Video
Metadata
Preview-Select
Transcript
Optional

Code: Select all

html, body {
height: 100vh;
max-height: 100vh;
margin: 0px;
}

/* Grid-Container */
#container {
display:grid;
grid-template-areas:
"v p"
"v o"
"v t"
"m t";
grid-template-columns: 1fr min-content;
grid-template-rows: repeat(3, min-content) 1fr;
gap: 4px;
width:100%;
}

/* Grid-Items */
div.grid-item {
border-color: black;
border-width: 2px;
border-style: solid;
position: relative;
}

#video {
background-color: green;
height: 180px;
grid-area: v;
}
#metadata {
background-color: yellow;
height: 30px;
grid-area: m;
}
#previewSelect {
background-color: red;
height:30px;
grid-area: p;
}
#transcript {
background-color: blue;
align-self: stretch;
grid-area: t;
}
#optional {
height: 30px;
grid-area: o;
}

Code: Select all

Video
Metadata
Preview-Select
Transcript
Optional