Wie kann ich die Größe verschachtelter CSS-Rasterzeilen automatisch an die Inhaltshöhe anpassen?

CSS-Raster: Zeilen automatisch an den Inhalt anpassen

Bei der Verwendung verschachtelter CSS-Raster kann es zu einem Problem mit den Zeilenhöhen kommen des rechten verschachtelten Gitters werden durch das linke Gitter beeinflusst, was zu nicht übereinstimmenden Höhen führt. Um dieses Problem zu lösen und die rechten Zeilen an die Inhaltsgröße anzupassen, können wir die Eigenschaft „grid-auto-rows: max-content“ verwenden.

Im bereitgestellten Code-Snippet ist das Raster des rechten verschachtelten Rasters Auto-Zeilen: Auto legt fest, dass die Zeilenhöhe automatisch basierend auf dem darin enthaltenen Inhalt berechnet wird. Da das linke Raster jedoch mehrere Zeilen hat, wird auch die Höhe des rechten Rasters beeinflusst, was zu ungleichmäßigen Zeilenhöhen führt.

Durch Ändern der Grid-Auto-Rows-Eigenschaft des rechten verschachtelten Rasters in Grid-Auto-Rows : max-content erzwingen wir, dass die Zeilenhöhe auf die Höhe des größten Elements innerhalb jeder Zeile festgelegt wird. Dadurch wird sichergestellt, dass die Zeilen des rechten verschachtelten Rasters unabhängig von der Größe des Inhalts mit den Zeilenhöhen des linken Rasters übereinstimmen.

Unten ist der aktualisierte Code:

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

Mit dieser Änderung entsprechen die Zeilen des rechten verschachtelten Rasters Die Zeilen passen sich automatisch an die Inhaltsgröße an und stellen sicher, dass beide Raster Zeilen gleicher Höhe haben.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe verschachtelter CSS-Rasterzeilen automatisch an die Inhaltshöhe anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!