CSS网格项目堆叠在彼此之上，而不是考虑网格区域
CSS网格项目堆叠在彼此之上，而不是考虑网格区域
提问于 2018-07-22 00:54:58
代码沙盒链接：https://codesandbox.io/s/rw0j2orqmp
我有以下网格模板设置：
.calculator {
margin: auto;
vertical-align: center;
width: 30%;
height: 300px;
background-color: blue;
display: grid;
grid-template-rows: repeat(5, auto);
grid-template-columns: repeat(4, auto);
grid-template-areas:
"display display display display"
"clear clear clear method"
"number number number method"
"number number number method"
"number number number method"
"posNeg number decimal method";
#display {
display: block;
grid-area: display;
margin: 5px;
resize: none;
text-align: right;
font-size: 40px;
width: 95%;
height: 100px;
}
.clear {
display: block;
grid-area: clear;
}
.number {
display: block;
grid-area: number;
}
.method {
display: block;
grid-area: method;
}
.posNeg {
display: block;
grid-area: posNeg;
}
.decimal {
display: block;
grid-area: decimal;
}
}每个div中的按钮都是由React中的以下JSX生成的：
function Calculator() {
return (
<div className="container">
<h1>Javascript Calculator</h1>
<div className="calculator">
<textarea id="display" />
{types.map(y => (
<div className={y} key={y}>
{buttons.map(
x =>
x.type === y ? (
<button id={x.id} key={x.id}>
{x.name}
</button>
) : null
)}
</div>
))}
</div>
</div>
);
}由于某些原因，当我设置它们的grid-area属性时，我的div并没有考虑它们在网格区域中的位置，而是在底部呈现。我尝试在每个div类中设置为display: block；，也尝试在父类中将position设置为几个不同的值。我最初让每个按钮自动生成，但包装它们的div并不存在，在这种情况下，每个按钮仍然呈现在底部，并占据了容器元素的整个底部50%。
它看起来是这样的：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-22 01:31:55
这不是grid-template-areas的有效值
grid-template-areas:
"display display display display"
"clear clear clear method"
"number number number method"
"number number number method"
"number number number method"
"posNeg number decimal method";所有的区域名称都必须在网格中形成矩形，但number不是，您可以将悬空的number更改为decimal，例如，以修复它：
grid-template-areas:
"display display display display"
"clear clear clear method"
"number number number method"
"number number number method"
"number number number method"
"posNeg decimal decimal method";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51458258
复制相关文章
相似问题
腾讯云开发者
