• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Grid-Template repeat(auto) statt Media Query

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

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 */
 
Ich hatte eine Weile mit repeat(auto-..., minmax())) herumprobiert, aber das Ergebnis war nicht wie gewollt, also nicht so wie mit den Media Queries.
Mir ist jetzt nicht ganz klar welches Verhalten du gerne hättest … Und der Ansatz mit minmax() wäre schon richtig, aber ohne deine Vorstellung zu kennen und auch ohne eine Seite zu haben unter der man sich deinen Versuch anschauen kann, lässt sich nicht sagen was du falsch machst. Was allerdings auf jeden Fall falsch ist: die Verwendung von Pixeln als Einheit.
 
minmax funktioniert natürlich nicht eins zu eins wie das Verhalten mit MediaQueries. Ich habe mal als Diskussionsgrundlage ein Beispiel mit minmax erstellt:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Container-Anordnung mit Grid 01</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   @media all {
      html {
         font-family: sans-serif;
         font-size: 130%;
         line-height: 1.3;
         margin: 0rem 0.5rem 0rem 0.5rem;
      }
      body {
         background-color: #f5f5f5;
         max-width: 1200px;
         margin: 1.5rem auto 2.5rem auto;
      }
      p {
         font-size: 1rem;
         font-style: normal;
         margin: 0rem 0rem 0rem 0rem;
      }
      .ali {
         display: grid;
         gap: 0.5rem;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      }
      .ali p {
         padding: 0.5rem 0.5rem 0.5rem 0.5rem;
         border: 1px solid grey;
         border-radius: 0.5rem;
      }
   }
   </style>
</head>
<body>
   <h1>Muhammed Ali</h1>
   <div class="ali">
      <p>Ich bin der König der Welt! Ich habe die Welt erschüttert.</p>
      <p>Ich werde das Kämpfen nicht vermissen, das Kämpfen wird mich vermissen.</p>
      <p>Schwebe wie ein Schmetterling, steche wie eine Biene.</p>
      <p>Ich habe George Foreman beim Schattenboxen gesehen, und der Schatten hat gewonnen.</p>
      <p>Ist das alles, was Du hast, George?</p>
      <p>Boxen ist nur ein Job. Gras wächst, Vögel fliegen, Wellen schlagen an den Strand - ich verhaue Leute.</p>
      <p>Die Menschen begreifen nicht, was sie hatten, bis es weg ist. Wie Präsident Kennedy, es gab niemanden wie ihn. Wie die Beatles, es wird nie wieder etwas wie sie geben. Wie mein Elvis Presley. Ich war der Elvis des Boxens.</p>
      <p>Lebe jeden Tag, als wäre es Dein letzter. Irgendwann wirst du Recht behalten.</p>
      <p>Was ich körperlich erlitten habe, war das, was ich im Leben erreicht habe, wert. Ein Mensch, der nicht mutig genug ist, Risiken einzugehen, wird niemals etwas im Leben erreichen.</p>
      <p>Ein Mann, der die Welt mit 50 genauso sieht wie mit 20, hat 30 Jahre seines Lebens verschwendet.</p>
      <p>Boxen heißt, dass ein Haufen Weißer zwei schwarzen Männern dabei zusehen, wie sie sich verprügeln.</p>
      <p>Joe Frazier ist so hässlich, wenn er weint, kehren seine Tränen um und laufen an seinem Hinterkopf herunter.</p>
      <p>Cassius Clay ist ein Sklavenname. Ich habe ihn nicht gewählt, und ich will ihn nicht. Ich bin Muhammad Ali, der Name eines Freien, und ich verlange, dass ihn die Leute verwenden, wenn sie mit mir und über mich reden.</p>
      <p>Ich werde ihn so übel schlagen, dass er einen Schuhanzieher braucht, um seine Mütze aufzusetzen.</p>
      <p>Ich bin der Größte. Das habe ich schon gesagt bevor ich wusste, dass ich es tatsächlich bin.</p>
      <p>Ein Mann ohne Vorstellungskraft hat keine Flügel.</p>
      <p>Ich habe keinen Streit mit den Vietkong. Mich hat niemals ein Vietkong Nigger genannt.</p>
      <p>Ich wünschte, die Menschen würden jeden anderen auch so lieben wie sie mich lieben - es wäre eine bessere Welt.</p>
      <p>Ich werde nicht 10.000 Meilen reisen um Mördern dabei zu helfen, andere Leute zu töten und zu verbrennen nur um die Herrschaft weißer Sklavenhalter über dunkle Menschen auf dieser Welt aufrechtzuerhalten. Dies ist der Tag und die Zeit dieses böse Unrecht zu beenden.</p>
      <p>Zuhause bin ich ein netter Kerl, ich möchte aber nicht, dass die Welt das erfährt. Anständige Menschen, so habe ich herausgefunden, kommen nicht sehr weit.</p>
      <p>Ich bin so schnell, dass ich letzte Nacht, als ich das Licht im Hotelzimmer ausschaltete, schon im Bett lag bevor das Zimmer dunkel war.</p>
   </div>
</body>
</html>

Dabei werden maximal 4 Container nebeneinander angezeigt, weil mir die Texte sonst zu schmal werden. Wenn du maximal 5 Container nebeneinander stellen willst kannst du einfach

Code:
minmax(250px,

durch

Code:
minmax(200px,

ersetzen. Du kannst natürlich auch andere Werte ausprobieren.
 
Zuletzt bearbeitet:
Zurück
Oben