<head> <style> * { margin: 0; padding: 0; } body { box-sizing: border-box; min-inline-size: 100vi; max-inline-size: 100vi; min-block-size: 100vb; max-block-size: 100vb; overflow: hidden; display: grid; grid-template: "a b" 3fr "c d" 7fr / 15fr 33fr; :where(header, main, article, footer) { border: 1ex solid black; } haeder { grid-area: "a"; background: lime; } main { grid-area: "b"; background: cyan; } article { grid-area: "c"; background: yellow; } footer { grid-area: "d"; background: red; } } </style> </head> <body> <header>Zyanisch? Oder sonst:</header> <article>Wo ist derRahmen</article> <main>unten und</main> <footer>rechts denn nur geblieben?</footer> </body>