grid in html verschiebt sich bei auflösungsänderung

[Bennyaa]

Hallo, ich habe ein 3 spaltiges Grid, welches jeweils ein div mit einer breite und höhe von 400px beinhaltet.
(Darin befindet sich jeweils ein Bild).
Schiebt man nun den Browser kleiner, so schiebt sich das mittlere div unter die beiden äußeren.
Diese werden aber immer noch komplett dargestellt und sorgen für eine scrollbar im browser.
Warum verschiebt sich das mittlere div und bleibt nicht auch komplett sichtbar und sorgt für eine Scrollbar?

 

[p4cx]

Wenn du es nicht anders definiert hast, dann zerlegt der Browser das Layout. Dann besser sich mal mit responsive Webdesign auseinandersetzen. Zudem hilfts bei sowas auch immer den Code mitzuposten. Dann kann man auch besser direkt helfen: z.B. https://codepen.io/

 

[Amaoto]

Warum verschiebt sich das mittlere div und bleibt nicht auch komplett sichtbar und sorgt für eine Scrollbar?

Du hast irgendwo irgendwas definiert, das das so macht. Im Normalfall verschiebt es sich nicht. Das kannst du z.B. hier testen: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_display_grid

 

[djerunX]

Hast du für deine Bilder irgendwelche CSS-Eigenschaften angepasst? z.B. width auf eine % Zahl oder height auf "auto" ?

Aber wie p4cx schon sagte, ohne Code können wir auch nur im Dunkeln rumstochern

 

[Bennyaa]

Aha, ist ja schon mal ne 180° andere Aussage als von @p4cx .
Also ich habe ne grid mit tailwind erstellt.
sonst nichts.

<div class="grid grid-cols-3 gap-3 py-bs-1%">
  <div id="erste-div">
  <div id="zweite-div">
  <div id="dritte-div">
 </div>

 

[Rossie]

Also ich habe ne grid mit tailwind erstellt.

Mach es den Helfern möglichst einfach und erstelle ein lauffähiges Beispiel. codepen wurde schon genannt. Tailwind hat eine eigene Spielwiese, mit entsprechend weniger Aufwand: https://play.tailwindcss.com/

 

[p4cx]

Aha, ist ja schon mal ne 180° andere Aussage als von @p4cx .

Ich wusste ja nicht mit was du dein "Grid" gebastelt hattest. Bin von einer Tabelle ausgegangen, dem Worst-Case und wenn ich mich recht erinnere, verhaut der Browser einem die Tabelle.

Hab dein "Minimal"-Beispiel in dem tailwindcss.com Tool getestet: Funktioniert, auch mit einer festgesetzten Breite der Spalten auf 400px:

https://play.tailwindcss.com/Hf6kXvqq5a

 

[Bennyaa]

Ich wusste ja nicht mit was du dein "Grid" gebastelt hattest. Bin von einer Tabelle ausgegangen, dem Worst-Case und wenn ich mich recht erinnere, verhaut der Browser einem die Tabelle.

Hab dein "Minimal"-Beispiel in dem tailwindcss.com Tool getestet: Funktioniert, auch mit einer festgesetzten Breite der Spalten auf 400px:

https://play.tailwindcss.com/Hf6kXvqq5a

Also wenn ich deinen Link hier öffne und das browserfebster verkleiner, dann hat nur noch das rechte div im grid 400er Breite, obwohl sich eine scrollbar aufmacht.
die beiden anderen werden immer kleiner.

 

[Amaoto]

die beiden anderen werden immer kleiner.

Nicht wirklich, aber sie schieben sich übereinander.
Möchtest du, dass das übergeordnete div nicht mit der Ansicht skaliert, gib den Spalten eine feste Breite:
https://play.tailwindcss.com/R5uTaKFWDU

 

[Bennyaa]

Nicht wirklich, aber sie schieben sich übereinander.
Möchtest du, dass das übergeordnete div nicht mit der Ansicht skaliert, gib den Spalten eine feste Breite:
https://play.tailwindcss.com/R5uTaKFWDU

Ah ok, also gebe ich die Breite dem Grid vor und nicht dem div darin.
Danke

 

[p4cx]

Okey, also bei mir waren alle drei gleich groß und sind kleiner geworden wenn 1200px unterschritten wurden.

Mal ganz ohne irgendwelche Frameworks: https://codepen.io/p4cx/pen/xxdoVya
Die bleiben nebeneinander und sollten genau das sein, was du suchst. Das ist mit wenig googlen selber schnell herauszufinden. Wenn du auf die Features eines CSS-Frameworks verzichten willst (richtiges responsives Verhalten für moderne Endgeräte), dann nimm keines her.

 

[Bennyaa]

Okey, also bei mir waren alle drei gleich groß und sind kleiner geworden wenn 1200px unterschritten wurden.

Mal ganz ohne irgendwelche Frameworks: https://codepen.io/p4cx/pen/xxdoVya
Die bleiben nebeneinander und sollten genau das sein, was du suchst. Das ist mit wenig googlen selber schnell herauszufinden. Wenn du auf die Features eines CSS-Frameworks verzichten willst (richtiges responsives Verhalten für moderne Endgeräte), dann nimm keines her.

Das möchte ich ja, aber dann ab einer bestimmten Auflösung.
Bringt mir halt nichts, wenn sich ein div hinter ein anderes schiebt.