Wie passt man CSS-Rasterzeilen an die Inhaltshöhe in verschachtelten Rastern an?

CSS-Raster – Zeilenhöhe an Inhalt anpassen: Max. Inhalt für automatische Höhe

Beim Arbeiten mit verschachtelten CSS-Rastern kann es vorkommen, dass die Höhe zu groß ist Rasterzeilen beeinflusst die inneren Rasterzeilen, auch wenn diese sich idealerweise an die Größe ihres Inhalts anpassen sollten. In solchen Fällen liegt der Schlüssel zum Erreichen des gewünschten Verhaltens in der Verwendung der CSS-Eigenschaft „grid-auto-rows“.

Verschachtelte CSS-Raster und Zeilenhöhenpropagierung

Im bereitgestellten Codeausschnitt haben wir zwei Grid-Container (div und .grid-2), die horizontal innerhalb eines übergeordneten Grid-Containers (grid-1) angeordnet sind. Die Spalten in jedem Raster werden mithilfe von „grid-template-columns“ definiert und die automatische Platzierung von Zeilen wird durch „grid-auto-rows“ gesteuert.

Standardmäßig legt der .grid-2-Container „grid-auto-rows“ fest. Zeilen auf „Automatisch“ setzen, was bedeutet, dass die Zeilen an ihren Inhalt angepasst werden. Das Problem tritt jedoch beim inneren Grid-Container .grid-3 auf. Auch wenn „grid-auto-rows“ ebenfalls auf „auto“ eingestellt ist, werden die Zeilenhöhen des verschachtelten Rasters von den Zeilen des äußeren Rasters beeinflusst. Dies führt dazu, dass die höhere Seite des .grid-2-Containers ihre Höhe an den .grid-3-Container weitergibt, was zu einer konsistenten Zeilenhöhe in beiden Rastern führt.

Rasterzeilen auf „Max-Content“ setzen

Um dieses Problem zu beheben und die Zeilen des .grid-3-Containers an die Größe ihres Inhalts anzupassen, müssen wir die Eigenschaft „grid-auto-rows“ ändern. Der Wert „max-content“ stellt bei Verwendung mit „grid-auto-rows“ sicher, dass die Größe jeder Zeile im inneren Raster ihrem Inhalt entspricht, unabhängig von der Höhe der Zeilen im äußeren Raster.

Durch Festlegen des Rasters -auto-rows: max-content im inneren .grid-3-Container, weisen wir den Browser an, die Größe jeder Zeile ausschließlich auf der Grundlage des Inhalts innerhalb dieser Zeile zu berechnen. Dadurch kann sich das innere Raster unabhängig vom äußeren Raster anpassen, was zu Zeilen führt, die ihren Inhalt wie gewünscht perfekt umschließen.

Aktualisiertes Code-Snippet

Im aktualisierten Code-Snippet unten können Sie sehen die Änderung an Grid-Auto-Zeilen im inneren .grid-3-Container:

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
}

Mit dieser Anpassung werden die Zeilen im .grid-3-Container passen sich dynamisch an die Höhe ihres Inhalts an und erzielen so das gewünschte Größenänderungsverhalten.

Das obige ist der detaillierte Inhalt vonWie passt man CSS-Rasterzeilen an die Inhaltshöhe in verschachtelten Rastern an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!