Warum ist „minmax()' im CSS-Grid standardmäßig „max' anstelle von „min'?

Warum minmax() standardmäßig auf Max eingestellt ist

Sie haben möglicherweise bemerkt, dass bei der Verwendung von minmax() zum Festlegen der Höhe oder Breite von Rasterzeilen oder -spalten das Standardverhalten vorliegt besteht darin, dass sich die Spur auf ihre maximale Größe ausdehnt, anstatt auf ihrer minimalen Größe zu bleiben. Dies kann verwirrend sein, insbesondere wenn Sie erwarten, dass die Spur entsprechend dem min()-Wert in minmax() auf der kleinstmöglichen Größe bleibt.

Verstehen des Verhaltens

Der Grund dafür Dieses Verhalten ist auf den standardmäßigen Skalierungsmodus von Spuren in einem Rasterlayout zurückzuführen. Gemäß der CSS-Spezifikation werden Spuren normalerweise so groß, dass sie den verfügbaren Platz ausfüllen, bis sie ihre maximale Größe erreichen. Wenn der verfügbare Platz größer ist als die gesamte Mindestgröße aller Spuren, wird der verbleibende Platz gleichmäßig auf die unbegrenzten Spuren (diejenigen ohne definierte Maximalgröße) verteilt.

Dieses Standardverhalten ist normalerweise erwünscht, da es dafür sorgt dass Spuren den verfügbaren Platz effizient belegen.

Priorität der Mindestgröße erreichen

Damit Rasterzeilen oder -spalten auf ihrer Mindestgröße bleiben, sich aber auf ihre Maximalgröße erweitern, wenn mehr Inhalt vorhanden ist hinzugefügt, können Sie eine Kombination aus minmax() und anderen CSS-Eigenschaften verwenden:

• Verwenden Sie minmax(min-size, min-size) für die Zeilen-/Spaltengröße: Dies wird Erzwingen Sie, dass die Spuren immer ihre Mindestgröße beibehalten, auch wenn Platz verfügbar ist.
• Geben Sie die maximale Breite/Höhe im Raster an Elemente: Dadurch wird verhindert, dass die Rasterelemente ihre maximale Größe überschreiten, und sichergestellt, dass die Rasterzeilen oder -spalten nicht über ihre angegebene maximale Größe hinaus erweitert werden.

Beispiel:

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
  grid-gap: 20px;
}

.item {
  max-width: 200px;
}

In diesem Beispiel haben die Rasterspalten immer eine Mindestbreite von 100 Pixeln, werden aber nicht über diese Größe hinaus erweitert. Wenn den Rasterelementen mehr Inhalt hinzugefügt wird, werden die Spalten erweitert, um den neuen Inhalt aufzunehmen, überschreiten jedoch nicht ihre maximale Breite.

Das obige ist der detaillierte Inhalt vonWarum ist „minmax()' im CSS-Grid standardmäßig „max' anstelle von „min'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!