Ich frage mich momentan, ob es eine korrekte Vorgehensweise wäre, wenn ich innerhalb eines wrappers ein GRID-Raster anlege?
Das sähe so aus:
.main-content-wrapper {
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 72em;
height: 100%;
min-height: 100vh;
overflow: hidden;
border: 2px dashed #551A8B;
}
.main-content-wrapper {
display: grid;
grid: "main-head main-head" auto
"navigations navigations" auto
"main-content main-content" 1fr
"main-footer main-footer" auto
/ minmax(0, auto); }
<body id="skip-to-top">
<div class="main-content-wrapper">
<header role="header" id="main-head">
[ ... ]
Ich habe festgestellt, wenn ich body als wrapper nutze, dann entstehen bei ganz schmalen Browserfenster einige Fehler, die u.a. so aussehen das (wenn ich bei den Dev-Tools grid anzeigen lasse) mein grid seitlich rechts vom body und html hinaus wandern würde oder: mein grid bleibt an einem Punkt stehen und nur html & body wird noch schmaler. Daher meine Entscheidung ein weiteres div einzusetzen.
Ist dies richtig? Wie seht ihr das?
Oder sollte ich eher eine Lösung ohne wrapper anstreben, die ganze Seite mit einem dreispaltigen grid lösen?
body {
display: grid;
grid-template-columns: [left] minmax(0.45em,1fr) [main] minmax(10em,78em) [right] minmax(0.45em,1fr);
grid-template-rows: repeat(2,min-content) auto;
grid-gap: 0;
}
Die gridfelder rechts und links sind quasi mein Puffer, wenn ich mein Browserfenster zusammenziehe, und wird dann automatisch weniger/ kleiner.
Was wäre die bessere Herangehensweise?
