如何使网页的侧面部分减小宽度，同时将整个页面的宽度减小一定程度？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: grid;
grid-template-columns: 10% 80% 10%;
min-height: 100vh;
}
.side-right {
background: red;
}
.side-left {
background: blue;
}
.main {
background: green;
}
@media screen and (max-width: 1000px) {
.container {
grid-template-columns: 0 100% 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="side-right">
</div>
<div class="main">
</div>
<div class="side-left">
</div>
</div>
</body>
</html>
在下面的示例中，在max-width = 1000px之后，侧面元素立即消失了，但是我想让它们减少它们的宽度，从而改变max-width上的每个像素。如何制作？
您可以通过flex-box设置所有动画，而只需更改某些CSS。
尝试将min-with: 50px;添加到.side-right和.side-left然后给他们两个都z-index: 1;所以他们不会躺在你的主]
如果我正确理解了您的要求，请将初始grid-template-columns更改为