Warum begünstigt „minmax()' in „grid-template-rows' die maximale Größe und wie kann ich minimale Zeilenhöhen beibehalten?

minmax()-Funktion standardmäßig auf maximales Verhalten

Bei der Anwendung von minmax() auf Rastervorlagenzeilen widerspricht das resultierende Verhalten oft den Erwartungen und gibt dem maximalen Wert Vorrang vor der Mindestwert. Dies führt zu einer unerwarteten Dehnung der Rasterzeilen, sodass wir uns fragen müssen:

Wie halte ich Rasterzeilen auf minimaler Größe?

Um sicherzustellen, dass Rasterzeilen auf ihrer angegebenen Mindestgröße bleiben, während sie auf das Maximum erweitert werden Ziehen Sie bei Bedarf die folgende Lösung in Betracht:

1. Verwenden Sie „minmax(min-content, max-size)“ für „grid-template-rows“

Diese Änderung zwingt die Zeilen dazu, sich eng um ihren Inhalt zu wickeln, um sicherzustellen, dass sie mit der Mindestgröße beginnen und nur erweitert werden wenn weitere Inhalte hinzugefügt werden. Die maximale Größe garantiert, dass sie das gewünschte Maximum nicht überschreiten.

2. Maximale Höhe zu Rasterelementen hinzufügen

Um zu verhindern, dass Rasterelemente über die gewünschte maximale Größe hinaus gedehnt werden, legen Sie für sie die maximale Höhe fest.

Beispiel:

body {
  grid-template-rows: minmax(50px, min-content);
}

grid-items {
  max-height: 150px;
}

Bei diesem Ansatz sind die Rasterzeilen zunächst 50 Pixel hoch, werden aber erweitert, um zusätzliche Inhalte aufzunehmen. Sie werden jedoch die maximale Höhe von 150 Pixel nicht überschreiten.

Das obige ist der detaillierte Inhalt vonWarum begünstigt „minmax()' in „grid-template-rows' die maximale Größe und wie kann ich minimale Zeilenhöhen beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!