CSS Grid - Problem mit vertikalem Scrollbalken

  • Hi zusammen,


    ich habe mich gestern nach jahrelanger Verwendung von bootstrap nun mal dazu entschlossen, mich mit CSS grid zu beschäftigen.


    Vorab gleich mal die Frage (weil ich nicht mehr auf dem aktuellen Stand bin...):

    Ist es überhaupt empfehlenswert, auch für kommerzielle Projekte CSS Grid einzusetzen, oder ist zu erwarten, dass viele noch Browser im Einsatz haben, die damit nicht zurecht kommen?


    Was ich in meinem Projekt möchte:

    Mehrere "Kachelartig" angeordnete DIVs, die sich je nach Bildschirmbreite nebeneinander anordnen und immer gleich hoch sind.


    Und hier mal konkret zu meinem Problem (das auf euch wahrscheinlich lächerlich wirkt, aber ich komm echt nicht drauf):



    Das Problem ist, dass ich immer einen kurzen ´, horizontalen Scrollbalken hab, wenn ich die Seite auf meinem Handy Anzeige.

    Und ich komm einfach nicht drauf, an welcher Schraube ich drehen muss, dass der Scrollbalken weg ist...


    Könnt ihr mir eine kleine EInstiegshilfe geben?


    LG und schönen Sonntag allen


    Daniel

  • Auf meinem Handy (Samsung A50 mit Samsung-Browser) tritt zwar keine Scrollbar auf, ich kann das Problem aber reproduzieren, indem ich im Desktop-Browser das Fenster schmaler ziehe. Und wenn ich die minimale Breite von 25em im CSS grid-template-columns: repeat(auto-fill, minmax(25em, 1fr)); erhöhe, taucht auch in meinem mobilen Browser die Scrollbar auf.

    Der Grund ist offensichtlich, dass die Griditems bei der minimalen Breite und der vertikalen Anordnung nicht mehr in den schmalen Bildschirm des Handy hinein passen, so dass der Browser eine Scrollbar einblendet.

    Abhilfe, indem Du mit einer Mediaquery die Breite dynamisch machst: grid-template-columns: 1fr; aber dann kann es passieren, dass deine Inhalte nicht mehr hinein passen. Um das zu beurteilen müsste man wissen wie die realen Inhalte aussehen.

  • Hi,


    der Inhalt ist in meinem Fall nur Text.

    Aber Danke, hast mir schon weiter geholfen, genau so mach ichs.


    Aber noch wegen meiner eingehenden Frage:

    Kann man CSS-grid heutzutage bedenkenlos verwenden, zumindest die von mit gepostete Minimalstruktur?

    Oder erwische ich damit dann noch viele Besucher, bei denen CSS Grid u.U. nicht vom Browser unterstützt wird?

    Im "schlimmsten" Fall würden die Inhalte dann bei demjenigen einfach untereinander angezeigt werden, oder?


    Grüßle

    Daniel