Rolf B: Ist nachfolgendes layout realisierbar

Beitrag lesen

Hallo Karl-Heinz,

ist dieses Layout realisierbar?

Ja. Mit display:grid. Auf einem genügend großen Bildschirm. Denk an die Variante für kleine Bildschirme, gestalte dein HTML mit Blick darauf und aktiviere die Grid-Darstellung per @media (min-width...) nur, wenn genug Platz ist. Vermutlich brauchst Du dann ein Ausklappmenü.

Gibt es ein ähnliches Beispiel als Vorlage?

Keine Ahnung. "Inhaltsteil" und "Titel, bla bla" müssen wohl in eine gemeinsame Gridzelle, damit der Viertelkreis durch einen border-radius realisiert werden kann, d.h. da brauchst Du ein subgrid oder ein Grid im Grid (alternativ Flexbox mit vertikaler Ausrichtung). Ähnliches dürfte für Logo und AAAA BBBB gelten. Oder mir fehlt gerade die clevere Idee...

Den Container, der grid-Layout hat, setzt auf Du auf height: 100vh;. Dann müssen Margin und Padding allerdings 0 sein, sonst erzeugst Du Scrollbars. Falls Du Margins möchtest, um etwas Abstand vom Fensterrand zu halten, musst Du die mit calc von der Höhe abziehen. Falls Du padding einsetzt, denk an box-sizing:border-box, damit das Padding nicht die Höhe vergrößert.

Grundsätzlich brauchst Du kein eigenes div oder so, um das Grid-Layout zu realisieren, du kannst auch den body zum Grid machen.

Reicht das als Anschub?

Rolf

--
sumpsi - posui - obstruxi