Html css布局网格容器中心

我试图使布局响应基于窗口宽度而不是容器更新宽度使用窗口宽度100%分割网格宽度100px而不是对齐中心边距：0自动。 但是当我使用css clac时，它不能100%/100px工作，如何解决它呢？只有使用css而不使用js才能使它工作吗

---

calc中的第一个值似乎是百分比，第二个值是数字，这意味着不能除以像素。i、 e.calc100%/7正确，calc100%/7px不正确

然而，根据这个网站的说法，这并不能解决你的问题：-数学运算符周围必须有空格

说明：

分部。右手边必须是a

参考：

---

请注意calc函数的向后兼容性：

如下更新css：

.container {
    background: red;
    margin: 0 auto;
    width: calc(100%/100px);
    display: table;
    position:relative;
    margin: 0 auto;
}
.grid {
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
    float : left;
    margin: 0 auto;
    position: relative;
    text-align:left;
}

你可以在这里看到结果：

---

希望有帮助

谢谢你的回复。我知道它可能是calc100%+100px，但我找不到任何文件说不能除以像素，是吗？这就是为什么我尝试修改我的答案。当你调整窗口宽度时，那些网格不在中心

.container {
    background: red;
    margin: 0 auto;
    width: calc(100%/100px);
    display: table;
    position:relative;
    margin: 0 auto;
}
.grid {
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
    float : left;
    margin: 0 auto;
    position: relative;
    text-align:left;
}