css grid-container, responsive

  • Hallo,

    ich habe mich mal an css grid-container versucht und mit 3 verschachtelten DIVs gearbeitet auf ycsh80.de

    In der mobilen Darstellung wird zuerst das rechte Grid in die zweite Zeile verrückt.
    Das sieht unsymmetrisch aus; nicht schön!


    Nun habe ich auch schon Seiten gesehen, da rutschen sofort alle Grids untereinander in eine einzige Spalte.


    Das sieht gut aus, ich weiß aber nicht, wie ich das bewerkstelligen soll?


    Wahrscheinlich @media, aber welches.

    mfg

  • Hmm, ich denke das "Problem" ist das auto-fit, damit machst du ein grid responsive im Sinne von die Spalten passen sich an, je nach dem wie viel Platz da ist.

    Wenn du immer 3 Spalten haben willst:

    Code
    .grid {
        grid-template-columns: 1fr;
    }
    @media (min-width: 769px) {
        .grid {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    min-width kannst du anpassen, je nach dem wo du den Wechseln haben willst.