I have elements aligned using grid layout
The max width of the container is set to max-width: 80% which displays a gap on the right side
I want to always center the page, is there a way to
adjust the padding in root dynamically ?
: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>you can add margin: auto to the container
.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>you are misunderstanding the role :root plays in css structure and confusing it with the body tag. see https://developer.mozilla.org/en-US/docs/Web/CSS/:root
this will do the trick if you're always going to wrap your page elements in a .container.
.container{
width: 80%;
margin-left: auto;
margin-right: auto;
}
this will work if your page elements may sometimes be some other element.
body > *{
width: 80%;
margin-left: auto;
margin-right: auto;
}
if you want to determine the width of your elements on a case by case basis, defining your body as a flex element may help. more about flex here
body {
display: flex;
flex-direction: column;
align-items: center;
}