Wäre es eine korrekte Vorgehensweise wenn ich innerhalb eines wrappers ein GRID-Raster anlege?
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?
1 Antwort
Beide Ansätze sind legitim. Ein eigener Container bietet den Vorteil, einer zusätzlichen Separation.
(...) mein grid seitlich rechts vom body und html hinaus wandern würde (....)
Setze am besten auch die minimale Breite einer Spalte explizit. Entweder auf dem entsprechenden Element, welches in den Grid-Platzhalter eingefügt wird (min-width: 0) oder bei der Grid-Area-Definition (minmax(0, 1fr)).
Die gridfelder rechts und links sind quasi mein Puffer, (...)
Für eine horizontale Zentrierung würde ich einen Container entweder klassisch mit einer Breite sowie margin: 0 auto ausstatten oder ihn in eine Flexbox / ein einspaltiges Grid packen, in dem die Inhalte zentral ausgerichtet werden.