Wie kann ich verschachtelte CSS-Rasterzeilen an ihre Inhaltsgröße anpassen, anstatt die Höhe eines übergeordneten Rasters zu erben?

CSS-Raster: Anpassen verschachtelter Rasterzeilen an die Inhaltsgröße

Im bereitgestellten HTML und CSS ist ein Problem aufgetreten, bei dem die verschachtelten Grid .grid-3 erzwingt, dass seine Zeilen an der Höhe des verschachtelten Grids .grid-2 ausgerichtet werden. Um dieses Problem zu lösen, möchten Sie, dass sich die Zeilen von .grid-3 an die Größe ihres Inhalts anpassen und damit an die Höhe der .grid-2-Zeilen angepasst werden.

Die Lösung liegt in den Grid-Auto-Zeilen Eigentum. Standardmäßig ist diese Eigenschaft auf „Auto“ eingestellt, wodurch der Platz unabhängig von der Inhaltsgröße gleichmäßig auf die Zeilen verteilt wird. In diesem Fall benötigen wir jedoch Zeilen, die sich an den Inhalt anpassen.

Um dies zu erreichen, müssen Sie „grid-auto-rows: max-content“ im .grid-3-Raster festlegen. Dadurch wird der Browser angewiesen, die Zeilen so hoch zu machen, wie es ihr Inhalt erfordert, um sicherzustellen, dass sie mit der Höhe der .grid-2-Zeilen übereinstimmen.

Hier ist das aktualisierte CSS-Snippet:

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

Mit dieser Änderung wird die Größe der Zeilen in .grid-3 nun an ihren Inhalt angepasst und an die Höhe der .grid-2-Zeilen angepasst, während ihr Inhalt vollständig erhalten bleibt sichtbar.

<div class="grid-2">
  <div class="grid-2">
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
    <div class="left">L</div>
  </div>
  <div class="grid-3">
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
    <div class="right">R</div>
  </div>
</div>

Hier wird gezeigt, wie man ein CSS-Raster konfiguriert, um sicherzustellen, dass sich Zeilen an die Größe ihres Inhalts anpassen, sodass verschiedene Raster nahtlos aneinander ausgerichtet werden können.

Das obige ist der detaillierte Inhalt vonWie kann ich verschachtelte CSS-Rasterzeilen an ihre Inhaltsgröße anpassen, anstatt die Höhe eines übergeordneten Rasters zu erben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!