Wie erreicht man Zeilen mit automatischer Höhe in verschachtelten CSS-Rastern?

CSS-Rasterlayout: Zeilen mit automatischer Höhe und inhaltsbasierter Größenanpassung

In diesem Szenario haben Sie ein Rasterdesign mit zwei verschachtelten Rastern. Während sich das linke verschachtelte Raster wie erwartet verhält, ist die Höhe der Zeilen im rechten verschachtelten Raster so eingestellt, dass sie mit der Höhe der Zeilen im linken Raster übereinstimmt.

Festlegen der Eigenschaft „grid-auto-rows“ auf max. Durch den Inhalt im rechten verschachtelten Raster können sich die Zeilen an die Höhe ihres Inhalts anpassen, wodurch das Problem behoben wird und sichergestellt wird, dass beide verschachtelten Raster gleiche Zeilen aufweisen Höhe:

.grid-3 {
  grid-auto-rows: max-content;
}

Mit dieser Änderung werden die Zeilen im rechten verschachtelten Raster automatisch skaliert, um sie an ihren Inhalt anzupassen, wodurch das gewünschte visuelle Gleichgewicht zwischen den beiden Rastern erhalten bleibt.

Das obige ist der detaillierte Inhalt vonWie erreicht man Zeilen mit automatischer Höhe in verschachtelten CSS-Rastern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!