把整个设置成grid，如何将 left、right设置成固定100px宽度，center为自适应？
极客观点
项目管理
HarmonyOS
<div class="grid">
<div id="header">#header</div>
<div id="left" class="column">#left</div>
<div id="center" class="column">#center</div>
<div id="right" class="column">#right</div>
<div id="footer">#footer</div>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
margin: 0;
}
.grid {
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: min-content 1fr min-content;
height: 100vh;
width: 100vw;
}
#header, #footer {
grid-column-start: 1;
grid-column-end: 4;
height: 200px;
background-color: rgba(0, 0, 0, .4);
}
#left {
background-color: cornflowerblue;
}
#center {
background-color: lightgray;
}
#right {
background-color: orangered;
}
</style>
</head>
<body>
<div class="grid">
<div id="header">#header</div>
<div id="left" class="column">#left</div>
<div id="center" class="column">#center</div>
<div id="right" class="column">#right</div>
<div id="footer">#footer</div>
</div>
</body>
</html>
3 回答4.9k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
4 回答1.3k 阅读✓ 已解决
2 回答1.9k 阅读✓ 已解决
3 回答1.1k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
5 回答1.9k 阅读
可以用calc，把宽度减去两个100px从而让浏览器自己去计算:
希望能帮助到你。