Wie kann ich dafür sorgen, dass verschachtelte CSS-Rasterzeilen ihre Höhe automatisch an den Inhalt anpassen?

CSS-Raster: Zeilen mit automatischer Höhe, Anpassung an den Inhalt

Beim Arbeiten mit verschachtelten CSS-Rastern können konsistente Zeilenhöhen in beiden Rastern erreicht werden eine Herausforderung. In diesem Szenario werden die Zeilen im rechten verschachtelten Raster gezwungen, mit der Höhe der Zeilen im linken verschachtelten Raster übereinzustimmen, was zu ungleichmäßigen Abständen führt.

Um dieses Problem zu beheben, können Sie die Funktion „grid-auto-“ verwenden. rows: max-content-Eigenschaft für das rechte verschachtelte Raster. Diese Eigenschaft legt die Höhe jeder Zeile auf die Höhe ihres höchsten untergeordneten Elements fest. Dadurch werden die Zeilen dynamisch an den Inhalt angepasst und die Höhen an denen im linken verschachtelten Raster ausgerichtet.

Beispiel:

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

Diese Änderung stellt sicher, dass jede Zeile im rechten verschachtelten Raster so dimensioniert ist, dass sie zu ihrem Inhalt passt, wodurch eine einheitliche Höhe zwischen beiden Rastern entsteht. Hier ist ein aktualisierter Ausschnitt:

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

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

<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>

Jetzt passen die Zeilen im linken und rechten verschachtelten Raster automatisch ihre Höhe an, wodurch optisch einheitliche Ergebnisse entstehen.

Das obige ist der detaillierte Inhalt vonWie kann ich dafür sorgen, dass verschachtelte CSS-Rasterzeilen ihre Höhe automatisch an den Inhalt anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!