marctrix: Grid: Automatische Anordnung der Elemente in einem bestimmten Bereich

Hej alle,

ich nutze konsequent die Möglichkeiten von grid und flex zur Vermeidung von media-queries. Zur Veranschaulichung: @Gunnar Bittersmann hat mal einen Pen dazu erstellt.

Nun möchte ich aber, dass die sich automatisch anordnenden Kind-Elemente nicht mehr als 64em Platz einnehmen, auch dann nicht, wenn mehr zur Verfügung steht.

Klar geht das mit einem zusätzlichen Element. Eleganter wäre es aber, darauf verzichten zu können. Da ich nicht weiß, wie viel größer der Abstand drum rum ist, kann ich auch kein padding benutzen — padding: auto wäre cool, gibt es aber nicht. Ich könnte die Elemente zentriert anordnen, aber das würde ja nur dazu führen, dass immer mehr in eine Reihe gesetzt werden, wenn die vorhanden sind, bis die Reihe voll ist…

Die Breite des Fensters mit JS abfragen ist oll — das muss ja ständig aktualisiert werden, wenn jemand das Fenster skaliert…

Hat jemand eine Idee?

HTML sollte möglichst so aussehen:

<container>
  <grid-item></grid-item>
  <grid-item></grid-item>
  <grid-item></grid-item>
  […]
<container>

Marc

akzeptierte Antworten

  1. @@marctrix

    Nun möchte ich aber, dass die sich automatisch anordnenden Kind-Elemente nicht mehr als 64em Platz einnehmen, auch dann nicht, wenn mehr zur Verfügung steht.

    Klar geht das mit einem zusätzlichen Element. Eleganter wäre es aber, darauf verzichten zu können.

    Klar geht das ohne. max-width: 64em fürs Grid, bei Bedarf noch margin-left: auto; margin-right: auto.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hej Gunnar,

      @@marctrix

      Nun möchte ich aber, dass die sich automatisch anordnenden Kind-Elemente nicht mehr als 64em Platz einnehmen, auch dann nicht, wenn mehr zur Verfügung steht.

      Klar geht das mit einem zusätzlichen Element. Eleganter wäre es aber, darauf verzichten zu können.

      Klar geht das ohne. max-width: 64em fürs Grid, bei Bedarf noch margin-left: auto; margin-right: auto.

      Da fehlte noch eine Info: der container soll sich über die ganze Breite des Elternelementes erstrecken. Bin eben selber drauf gekommen (manchmal sieht man den Wald vor lauter Bäumen nicht).

      Ich war schon so nah dran mit padding: auto

      Hier die Lösung:

      padding: 1em calc(50% - 32em)
      

      Menno - noch nicht genug Kaffee heute morgen?!?

      Marc

      1. Hej marctrix,

        @@Gunnar Bittersmann

        Nun möchte ich aber, dass die sich automatisch anordnenden Kind-Elemente nicht mehr als 64em Platz einnehmen, auch dann nicht, wenn mehr zur Verfügung steht.

        Klar geht das mit einem zusätzlichen Element. Eleganter wäre es aber, darauf verzichten zu können.

        Klar geht das ohne. max-width: 64em fürs Grid, bei Bedarf noch margin-left: auto; margin-right: auto.

        Da fehlte noch eine Info: der container soll sich über die ganze Breite des Elternelementes erstrecken.

        Soll aussehen wie z.B. der header hier, nur eben ohne den zusätzlichen div.content

        Marc

      2. @@marctrix

        padding: 1em calc(50% - 32em)
        

        Das würde ich anders schreiben. Die 64em Maximalbreite kommen bei dir im Code nicht vor; und warum 50%, weißt du in zwei Wochen womöglich auch schon nicht mehr.

        Gesprächigerer Code:

        padding: 1em calc((100% - 64em) / 2)
        

        Bei einem laufenden Projekt hab ich das auch so in der Art gemacht, nur dass anstatt 64em eine komplexere Berechnung dasteht, weil sich die Schriftgröße fließend mit der Viewportbreite ändert.

        Und dass ich den horizontalen Versatz auf Seiten mit bzw. ohne Scrollbar wegbekommen habe:

        padding-left: calc((100% - 64em) / 2);
        padding-right: calc((100% - 64em) / 2);
        padding-right: calc((100% - 64em) / 2 - var(--scrollbar-width, 0px));
        

        Die Breite der Scrollbar wird mit JavaScript ermittelt:

        function adjustCenteredContent()
        {
        	document.documentElement.style.setProperty(
        		'--scrollbar-width',
        		`${window.innerWidth - document.documentElement.clientWidth}px`
        	);
        }
        
        window.addEventListener('load', adjustCenteredContent);
        window.addEventListener('resize', adjustCenteredContent);
        

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hej Gunnar,

          Das würde ich anders schreiben. Die 64em Maximalbreite kommen bei dir im Code nicht vor; und warum 50%, weißt du in zwei Wochen womöglich auch schon nicht mehr.

          Sehr gut.

          [Nur] dass ich den horizontalen Versatz auf Seiten mit bzw. ohne Scrollbar wegbekommen habe:

          Darüber hatte ich mir nicht einmal Gedanken gemacht. Sehr feine Lösung!

          Merci!

          Marc

        2. @@Gunnar Bittersmann

          Und dass ich den horizontalen Versatz auf Seiten mit bzw. ohne Scrollbar wegbekommen habe:

          Oops, im Projekt habe ich 100vw, nicht 100% zu stehen:

          padding-left: calc((100vw - 64em) / 2);
          padding-right: calc((100vw - 64em) / 2);
          padding-right: calc((100vw - 64em) / 2 - var(--scrollbar-width, 0px));
          

          Möglich, dass das hier einen Unterschied macht. Müsste ich mal testen.

          Die Breite der Scrollbar wird mit JavaScript ermittelt:

          		`${window.innerWidth - document.documentElement.clientWidth}px`
          

          Das wirft in alten Browsern natürlich einen Syntaxfehler. Man könnte auch

          		(window.innerWidth - document.documentElement.clientWidth) + 'px'
          

          dafür schreiben, was den Code aber nicht besser lesbar macht. Das wird ja auch nur für moderne Browswer benötigt, die auch mit custom properties umgehen können. Also das Script für alte Browser gar nicht erst einbinden:

          	<script>
          		if (window.CSS && 'supports' in CSS)
           		{
          			document.write('<script defer="" src="/path/to/modern.js"></script' + '>');
          		}
          	</script>
          

          LLAP 🖖

          PS: Hab mit Erschrecken festgestellt, dass ich die modern.js zwar erstellt, aber gar nicht eingebunden hatte. Gut, dass wir drüber gesprochen haben. 😉

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. @@Gunnar Bittersmann

            Oops, im Projekt habe ich 100vw, nicht 100% zu stehen:

            padding-left: calc((100vw - 64em) / 2);
            padding-right: calc((100vw - 64em) / 2);
            padding-right: calc((100vw - 64em) / 2 - var(--scrollbar-width, 0px));
            

            Möglich, dass das hier einen Unterschied macht. Müsste ich mal testen.

            Ja, das macht es. ☞ Testseite

            100vw ist richtig; 100% ist falsch.

            LLAP 🖖

            --
            „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. Hej Gunnar,

              @@Gunnar Bittersmann

              Ja, das macht es. ☞ Testseite

              Im FF uinter MacOS sehe ich keinen…

              Marc

              1. @@marctrix

                Im FF uinter MacOS sehe ich keinen [Unterschied]

                Lass mich raten: im Safari unter MacOS auch nicht. Im Chrome unter MacOS auch nicht.

                Wie breit macht sich denn der Scrollbalken unter MacOS so? 😄 (in der Standard-Voreinstellung)

                Das kannste aber ändern: Systemeinstellungen → Allgemein:

                Rollbalken einblenden: Immer

                Dann siehste auch unter MacOS den Unterschied.

                LLAP 🖖

                --
                „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                1. Hej Gunnar,

                  @@marctrix

                  Im FF uinter MacOS sehe ich keinen [Unterschied]

                  Lass mich raten: im Safari unter MacOS auch nicht. Im Chrome unter MacOS auch nicht.

                  Jetzt bin ich verwirrt. Ich sehe es — habe aber noch nichts umgestellt…

                  Vielleicht war es vorher doch der Safari?!?

                  Marc