NetAktiv
Senior HTML'ler
Ich habe ein Grid mit display: grid und will da einen Auto-Wrap, wobei die maximal Anzahl der Spalten von der Breite des Screen abhängen soll. Das klappt auch alles soweit ganz prima, wie ich das mit Media Queries gemacht habe. Allerdings finde ich das relativ komplex. Ich hatte eine Weile mit repeat(auto-..., minmax())) herumprobiert, aber das Ergebnis war nicht wie gewollt, also nicht so wie mit den Media Queries. Bei meiner Lösung nehmen die Items ja immer fast die volle Breite ein und schrumpfen mit dem Bildschirm, bis die nächste Größe erreicht wird. Meine Frage nun, ob das denn nicht auch ohne meine Media Queries geht?
Grüße, Rainer
Grüße, Rainer
CSS:
.container {
background-color: #f5f5f5;
margin: auto;
max-width: 1160px;
padding: 10px;
min-height: auto;
display: grid;
grid-template-columns: repeat(5 , 19%);
gap: 5px;
grid-template-rows: auto;
justify-items: initial;
justify-content: space-around;
}
@media screen and (max-width: 900px) { .container { grid-template-columns: repeat(4 , 24%); }} /* 4 Elemente pro Zeile */
@media screen and (max-width: 650px) { .container { grid-template-columns: repeat(3 , 33%); }} /* 3 Elemente pro Zeile */
@media screen and (max-width: 450px) { .container { grid-template-columns: repeat(2 , 48%); }} /* 2 Elemente pro Zeile */
@media screen and (max-width: 300px) { .container { grid-template-columns: repeat(1 , 95%); }} /* 1 Element pro Zeile */