Ich versuche, ein Rasterelement (.item3) vollständig über und 3 Zeilen nach unten zu erstrecken. Nachdem es spaltenweise überspannt wurde, wird es nicht zeilenweise überspannt. Aber wenn ich den Zeilenbereichswert auf 4 erhöhe, funktioniert es. Die Spannweite beträgt jedoch nur 2 statt 4. Hier ist der Code.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
}

.item {
  display: grid;
  border-radius: 2px;
  border: 1px solid red;
  background-color: var(--yellow);
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>
4
Kelly Brenchley 22 Feb. 2020 im 04:14

3 Antworten

Beste Antwort

Ihr Code hat keine Definition für die Zeilen. Sobald Sie das hinzufügen, sehen Sie, dass die Spanne sichtbar das tut, was zu erwarten ist.

Zuvor waren Ihre virtuellen Zeilen zusammengebrochen, weil sie selbst keinen Inhalt hatten und die Standardgröße auto hatten.

grid-template-rows: repeat(5, 24px);
.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 24px);
  grid-gap: 10px;
  background: black;
}

.item {
  display: grid;
  border-radius: 2px;
  border: 1px solid red;
  background-color: var(--yellow);
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

Ich gehe davon aus, dass Sie wissen, dass eine Gitterzelle immer rechteckig ist.

2
connexo 22 Feb. 2020 im 18:47

Sie müssen Informationen darüber bereitstellen, wie das Raster in Bezug auf die Zeilen aussieht.

Ohne grid-template-rows für das übergeordnete Element wird grid-row: span 3 für das untergeordnete Element in einem impliziten Raster berechnet und standardmäßig automatisch in der Größe dimensioniert (in der Höhenabmessung).

Durch Festlegen von grid-template-rows wird ein explizites Raster erstellt.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 20px);
  grid-gap: 10px;
  background: black;
}

.item {
  display: grid;
  border-radius: 2px;
  border: 1px solid red;
  background-color: var(--yellow);
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>
-1
ksav 22 Feb. 2020 im 09:39

In diesem Layout ist viel los.

Das Hauptproblem ist jedoch im Wesentlichen ein Mangel an zusätzlicher Höhe im Behälter.

Folgendes passiert:


Explizite und implizite Zeilen

Das haben Sie:

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
}

.item {
   display: grid;
   border-radius: 2px;
   border: 1px solid red;
   background-color: var(--yellow);
}

.item3 {
   grid-column: 1 / -1;
   grid-row: span 3;
}

Die .item -Regel hat keine Auswirkungen auf das Problem. Lassen Sie die Rahmen also nur zur Veranschaulichung.

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
}

.item3 {
   grid-column: 1 / -1;
   grid-row: span 3;
}

.item {
  border: 1px solid red;
}

Da Sie grid-template-rows oder grid-template-areas nicht definiert haben, gibt es keine expliziten Zeilen. Alle Zeilen sind implizit (nach Bedarf erstellt).

Die Größe impliziter Zeilen wird von grid-auto-rows bestimmt, dessen Standardwert auto (die Größe des Inhalts) ist.

Die Höhe jeder Zeile wird derzeit durch die Größe des Texts - die Zahlen - in Ihrem HTML-Code definiert.

Die Zahlen sind unsichtbar, da sowohl Hintergrund als auch Text schwarz sind. Um die Quelle der Zeilenhöhe besser zu verstehen, ändern wir die Textfarbe in Weiß.

.container {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-gap: 10px;
   background: black;
   color: white; /* new */
}

Hier ist der vollständige Code:

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

Wie oben angegeben, beträgt die Standardhöhe impliziter Zeilen auto. Dies bedeutet, dass die Zeilen zusammenfallen würden, wenn grid-auto-rows nicht angegeben wird und die Rasterelemente keinen Inhalt enthalten:

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
  <div class="item item9"></div>
  <div class="item item10"></div>
</div>

Die verbleibende Höhe im Container ergibt sich aus der Randdicke und den 10px-Rasterabständen. Entfernen Sie diese für einen vollständigen Zusammenbruch (das Raster verschwindet).

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* grid-gap: 10px; */
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  /* border: 1px solid red; */
}
<div class="container">
  <div class="item item3"></div>
  <div class="item item4"></div>
  <div class="item item5"></div>
  <div class="item item6"></div>
  <div class="item item7"></div>
  <div class="item item8"></div>
  <div class="item item9"></div>
  <div class="item item10"></div>
</div>

Das Problem mit Punkt 3

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

Wenn Sie item3 anweisen, sich über drei Zeilen zu erstrecken, erstreckt sich dies nicht über die drei vorhandenen Zeilen, da diese Spuren bereits belegt sind. Wenn Sie jedoch den Befehl grid-column entfernen, funktioniert span 3.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  /* grid-column: 1 / -1; */
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

Kehren wir für eine Minute zu meiner ersten Zeile zurück: "Wenn Sie item3 befehlen, sich über drei Zeilen zu erstrecken, erstreckt sich dies nicht über die beiden anderen Zeilen, da diese Spuren bereits belegt sind."

Das stimmt. Es ist aber auch wahr, dass zwei neue Zeilen erstellt werden . Das Raster unterteilt die erste Zeile einfach in drei.

So sieht es mit Firefox's Grid Inspector aus:

enter image description here

Beachten Sie, wie die erste Zeile in drei Zeilen unterteilt wurde und das Raster jetzt insgesamt fünf Zeilen enthält (da span 3 = vorhandene Zeile + 2).

Machen wir es grid-row: span 10 für einen besseren Blick:

enter image description here

Die Höhe der unterteilten ersten Zeile ergibt sich vollständig aus grid-gap, wodurch zwischen jeder neuen Zeile 10 Pixel hinzugefügt werden.

Das ist übrigens die Erklärung für diesen Teil Ihrer Frage:

Wenn ich den Zeilenbereichswert auf 4 erhöhe, funktioniert dies. Die Spannweite beträgt jedoch nur 2 statt 4 Zeilen.

Sie sehen tatsächlich nur den Effekt des Stapelns von 10px-Zeilenlücken.

Wenn Sie die Rasterlücke entfernen, generiert span weiterhin unterteilte Zeilen, aber diese neuen Zeilen ändern nicht die Höhe der ersten Zeile.

Hier ist das gleiche Layout mit span 10 und nein grid-gap:

enter image description here


Lösungen

Hier sind drei Möglichkeiten, um das Problem zu lösen.

1. Geben Sie dem Behälter eine gewisse Höhe.

Wenn Sie dem Container zusätzliche Höhe zur Verfügung stellen, was bedeutet, dass mehr Höhe als vom Inhalt benötigt wird, hat der grid-row: span 3 etwas Platz zum Arbeiten.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  background: black;
  color: white;
  height: 250px; /* new */
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

2. Definieren Sie grid-auto-rows.

Wenn Sie eine Höhe auf grid-auto-rows festlegen, die die Höhe impliziter Zeilen steuert, funktioniert grid-row: span 3 ebenfalls.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 50px; /* new */
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

3. Definieren Sie grid-template-rows.

Wenn Sie wissen, wie viele Zeilen Sie im Container haben möchten, setzen Sie Anzahl und Höhe auf grid-template-rows, wodurch die Höhe der expliziten Zeilen gesteuert wird.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 50px); /* new */
  grid-gap: 10px;
  background: black;
  color: white;
}

.item3 {
  grid-column: 1 / -1;
  grid-row: span 3;
}

.item {
  border: 1px solid red;
}
<div class="container">
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>
3
Michael_B 22 Feb. 2020 im 18:56