Tengo elementos alineados usando el diseño de cuadrícula. El ancho máximo del contenedor está establecido en max-width: 80% , lo que muestra un espacio en el lado derecho.
Quiero centrar siempre la página, ¿hay alguna forma de ajustar dinámicamente el relleno en root ?
:root { padding-left: 5%; padding-right: 5%; } :root { padding-left: 5%; padding-right: 5%; } .container { display: grid; height: 100vh; max-width: 80%; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr; grid-template-areas: "nav nav nav nav" "component1 component1 component1 component1" "component2 component2 component2 component2" "footer footer footer footer"; grid-gap: 0.5rem; font-weight: 800; text-transform: uppercase; text-align: center; } nav { text-align: center; background: #a7ffeb; grid-area: nav; border-radius: var(--main-radius); padding-top: var(--main-padding); } #component1 { background: #6fffd2; grid-area: component1; border-radius: var(--main-radius); padding-top: var(--main-padding); } #component2 { background: #64ffda; grid-area: component2; border-radius: var(--main-radius); padding-top: var(--main-padding); } footer { background: #1de9b6; grid-area: footer; border-radius: var(--main-radius); padding-top: var(--main-padding); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- add style css to page --> <link rel="stylesheet" href="./style.css" /> <title>Document</title> </head> <body> <div class="container"> <nav>Navbar</nav> <div id="component1">component1</div> <div id="component2">component2</div> <footer>Footer</footer> </div> </body> </html>puede agregar margin: auto al contenedor
.container { display: grid; height: 100vh; max-width: 80%; margin: auto; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 0.2fr 1.2fr 1.8fr 0.3fr; grid-template-areas: "nav nav nav nav" "component1 component1 component1 component1" "component2 component2 component2 component2" "footer footer footer footer"; grid-gap: 0.5rem; font-weight: 800; text-transform: uppercase; text-align: center; } nav { text-align: center; background: #a7ffeb; grid-area: nav; border-radius: var(--main-radius); padding-top: var(--main-padding); } #component1 { background: #6fffd2; grid-area: component1; border-radius: var(--main-radius); padding-top: var(--main-padding); } #component2 { background: #64ffda; grid-area: component2; border-radius: var(--main-radius); padding-top: var(--main-padding); } footer { background: #1de9b6; grid-area: footer; border-radius: var(--main-radius); padding-top: var(--main-padding); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- add style css to page --> <link rel="stylesheet" href="./style.css" /> <title>Document</title> </head> <body> <div class="container"> <nav>Navbar</nav> <div id="component1">component1</div> <div id="component2">component2</div> <footer>Footer</footer> </div> </body> </html>está malinterpretando el papel: root juega en la estructura css y lo está confundiendo con la etiqueta del cuerpo. consulte https://developer.mozilla.org/en-US/docs/Web/CSS/:root
esto funcionará si siempre va a envolver los elementos de su página en un .container.
.container{ width: 80%; margin-left: auto; margin-right: auto; }esto funcionará si los elementos de su página a veces pueden ser algún otro elemento.
body > *{ width: 80%; margin-left: auto; margin-right: auto; }si desea determinar el ancho de sus elementos caso por caso, definir su cuerpo como un elemento flexible puede ayudar. más sobre flex aquí
body { display: flex; flex-direction: column; align-items: center; }