Would it be correct to create a GRID grid within a wrapper?
I'm currently wondering if it would be the correct approach to create a GRID grid within a wrapper?
It would look like this:
.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"> [ ... ]I've noticed that when I use body as a wrapper, some errors occur in very narrow browser windows. These errors include (if I display the grid in the dev tools) my grid would move to the right of the body and HTML, or my grid would stop at one point, and only the HTML and body would become narrower. Hence my decision to use another div.
Is this correct? What do you think?
Or should I rather aim for a solution without a wrapper, solving the whole page with a three-column grid?
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; }The grid fields on the right and left are basically my buffer when I shrink my browser window, and then they automatically become smaller.
What would be the better approach?
(1 votes)
Loading...
Both approaches are legitimate. A separate container offers the advantage of an additional separation.
Also set the minimum width of a column explicitly. Either on the corresponding element which is inserted into the Grid placeholder (min-width: 0) or the Grid Area definition (minmax(0, 1fr)).
For horizontal centering I would have a container either classic with a width and margin: 0 car equip or pack it in a Flexbox / single-gap grid, in which the contents are aligned centrally.
Thank you.