Grid / Container

[Andre W.]

Hallo zusammen,

ich habe eine Frage und zwar möchte ich gern eine gewisse Darstellung von Artikeln haben, weiß nur nicht wie ich das realisieren soll.
Am besten schaut Ihr euch mal meine Vorstellung in meiner Zeichnung an die ich mitgeliefert habe. Weiß sonst nicht wie ich das erklären soll.

Über Hilfestellung oder Erklärung wie man das realisiert bin SEHR Dankbar!

demo.jpg

[Samuell]

Die erste Frage wäre ob es Artikel sein müssen?
Also Boxen die weitere Inhaltselemente enthalten.

Dann könntest Du 1 in die linke Spalte legen und 2 bis 5 in main verlagern und diese via Float, flexbox oder einer Technik Deiner Wahl nebeneinander setzen.
Bedenke, dass bei Float eine unterschiedliche Höhe mehrerer gefloateter Boxen in einem Container zu unschönen Effekten führen kann.

Denn man Reihe 2,3 und 4,5 trenen möchte, könnte man im Laout auch eigene Laoutbereiche vergeben und immer zwei in einem Layoutbereich packen.
Damit wäre das Problem mit der unterschiedlichen Höhe gelöst.

1 = left
2,3 = eigener Layoutbereich
4,5 = main

[Andre W.]

Danke für die Antwort, aber das ist nicht unbedingt wie ich es haben möchte. Am liebsten wäre es mir mit einem Gridsystem oder so, was sich später Mobil gut zusammen setzt.

[speedweb]

wenn es nicht genau dieses layout sein muss kann auch diese Erweiterung interessant sein.
Erweiterung dk_masonry

[tab]

Wie sieht das denn mit den Containern in der Realität aus? Kannst du denen feste Höhen und Breiten (in px, %, vw, vh oder was auch immer) zuweisen? Oder musst du da Rücksicht auf eventuell zu große/lange Inhalte nehmen? Notfalls könnte man aber auch per Javascript/jQuery dafür sorgen, dass es auch wirklich immer so passt.

[mlweb]

Am liebsten wäre es mir mit einem Gridsystem oder so, was sich später Mobil gut zusammen setzt.

Also mit Flexboxen kann man prima auch im responsive Design arbeiten und auch Float ist dazu gut geeignet.
Dein skiziertes Layout schreit für mich geradezu nach Flexboxen. Ist höchstens die Frage welche alten Browser Du noch berücksichtigen willst bzw. mußt und wieviel Aufwand Du dort in die Anpassung stecken willst.

[Andre W.]

Also mit Flexboxen kann man prima auch im responsive Design arbeiten und auch Float ist dazu gut geeignet.
Dein skiziertes Layout schreit für mich geradezu nach Flexboxen. Ist höchstens die Frage welche alten Browser Du noch berücksichtigen willst bzw. mußt und wieviel Aufwand Du dort in die Anpassung stecken willst.

Flexboxen? Wie kann ich die einbauen bzw. wo finde ich die?

[mlweb]

Dahinter steckt die Eigenschaft display: flex für Elemente.
Kannst aber auch einfach nach "css flexbox" googeln. Da gibt es etliche sehr anschauliche Beispiele.

[jscholtysik]

Hi Andre W.,


schau Dir mal diese Seite von CSS-Tricks an:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

oder hier:

https://blog.kulturbanause.de/2013/0...odell-von-css/

da kann man sich einiges zum Flexbox Layout in CSS3 herausziehen.


Ich persönlich würde hier auch Flexbox verwenden.

[Andre W.]

Vielen lieben Dank!

Flexboxen könnten mir bei verschieden Sachen schon helfen!!!