Vollständig reagierende Objekte mit CSS-Gitter und automatischer Anpassung. Minmax

Question

Die Verwendung von grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)) macht es einfach, ein reaktionsfähiges CSS-Gitter zu erstellen. Der Container wird mit so vielen Elementen gefüllt, die in eine Zeile passen, ohne eine Medienabfrage zu verwenden.

.container { 
 
    display: grid; 
 
    grid-gap: 5px; 
 
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background: #ccc; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Das Problem ist, dass die Elemente als der Bildschirm breiter sind, wenn der Bildschirm kleiner als der in angegebenen minmax() min-Wert. Sie können dies beheben, indem Sie eine Medienabfrage unter 400px hinzufügen. Dies funktioniert jedoch nur, wenn Sie wissen, dass sich kein Inhalt um den Container herum befindet. Und das ist fast unmöglich, wenn der Container irgendwo aufgestellt werden könnte.

Gibt es einen Weg oder eine Eigenschaft, den Elementen zu sagen, dass sie niemals breiter als 100% sein sollten?

Etwas wie: Füllen Sie den Container mit so vielen 400px-Elemente wie möglich, aber stellen Sie sicher, dass keiner von ihnen breiter als 100% der Breite des Containers wird.

CodePen Demo

Answer 1

Füllen Sie den Behälter mit so vielen 400px Gegenständen wie möglich, aber sicher, dass nicht von ihnen größer als 100% der Breite des Behälters gelangt.

, die für Sie das „max-content“ Eigentum verwenden können, in Ihrem Beispiel hierfür wäre:

.unresponsive { 
    grid-template-columns: repeat(auto-fit, minmax(400px, auto)); 
    grid-auto-columns: max-content; 
} 

Answer 2

Sie sollten grid-template-columns-grid-template-columns: repeat(auto-fit, minmax(min-content, 400px)) weil minmax Werke diese Art und Weise ändern: es versucht, max anzuwenden Wert und wenn es fehlschlägt, gilt es Minimum. Aber Sie können in Ihrem Gitter auf der rechten Seite Platz finden. Demo:

.container { 
 
    display: grid; 
 
    grid-gap: 5px; 
 
    grid-template-columns: repeat(auto-fit, minmax(min-content, 400px)); 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    background: #ccc; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>