为什么网格项不居中？

Question

由于某种原因，两个输入范围使网格中的前两个项目偏离中心。

我假设这是因为他们的影子DOM样式。实际情况如此吗？

是否有人知道范围为何使A和B项目偏离中心？

Here is a codepen.

＆＃13;

＆＃13;

body { margin: 0; background: #0d0d0d; }

#center{width:2px;height:100%;position:absolute;left:calc(50% - 1px);background:red;}

#grid {
  width: 80%;
  height: 30%;
  position: absolute;
  top: 35%;
  left: 10%;
  display: grid;
  grid-template-areas:
    "a a b b"
    "c c c d"
    "e e e f"
    "g g g g"
    ;
  grid-gap: 10px;
  color: #fff;
  box-sizing: border-box;
  border: dotted yellow 1px;
}

#a, #b { display: flex; justify-content: center; align-items: center; }

#a, #b, #d, #f, #g { background: #1a1a1a; }

#a { grid-area: a; }
#b { grid-area: b; }
#c { grid-area: c; }
#d { grid-area: d; }
#e { grid-area: e; }
#f { grid-area: f; }
#g { grid-area: g; }

＆＃13;

<div id="center"></div>
<div id="grid">
  <div id="a">A</div>
  <div id="b">B</div>
  <input type="range" id="c">
  <div id="d"></div>
  <input type="range" id="e">
  <div id="f"></div>
  <div id="g">&nbsp;</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题

如果未使用grid-template-columns（对于显式网格）或grid-auto-columns（对于隐式网格）定义网格列宽度，则每列的宽度保留为auto。这意味着宽度由内容决定。

您已使用grid-template-areas：

定义了布局

grid-template-areas:  "a a b b"
                      "c c c d"
                      "e e e f"
                      "g g g g" ;

但是你没有定义列，所以它们留给了自己的设备。

在这种情况下，auto列会导致网格中的视觉（但不是实际）错位：

如Chrome中所示：

解决方案

由于您使用的是四列隐式网格，因此可以将此规则添加到网格容器中以解决问题。

grid-auto-columns: 1fr

现在，它不是根据内容大小分配容器，而是在列之间平均分配空间。

Chrome，上面有调整：

revised codepen

您还可以使用此规则解决问题：

grid-template-columns: repeat(4, 1fr);

revised codepen

浏览器变体

顺便说一句，您的布局在支持网格的浏览器中呈现的方式不同。

铬

火狐

边线的

（我没有在Safari测试。）

基本上，在Firefox和Edge中，范围输入看起来像锁定在第一列中，并且不符合grid-template-areas规则。

这是因为这些浏览器设置的此类输入的默认设置：

火狐

所以基本上这些输入设置为width: 12em。

要解决此问题，请将其添加到您的代码中：

input { width: auto }

现在一切都应该适用于所有支持Grid的浏览器。

revised codepen

body { margin: 0; background: #0d0d0d; }

#center{width:2px;height:100%;position:absolute;left:calc(50% - 1px);background:red;}

#grid {
  width: 80%;
  height: 30%;
  position: absolute;
  top: 35%;
  left: 10%;
  display: grid;
  grid-template-areas:
    "a a b b"
    "c c c d"
    "e e e f"
    "g g g g"
    ;
  grid-gap: 10px;
  color: #fff;
  box-sizing: border-box;
  border: dotted yellow 1px;
  grid-auto-columns: 1fr; /* NEW */
}
input { width: auto; } /* NEW */

#a, #b { display: flex; justify-content: center; align-items: center; }

#a, #b, #d, #f, #g { background: #1a1a1a; }

#a { grid-area: a; }
#b { grid-area: b; }
#c { grid-area: c; }
#d { grid-area: d; }
#e { grid-area: e; }
#f { grid-area: f; }
#g { grid-area: g; }

<div id="center"></div>
<div id="grid">
  <div id="a">A</div>
  <div id="b">B</div>
  <input type="range" id="c">
  <div id="d"></div>
  <input type="range" id="e">
  <div id="f"></div>
  <div id="g">&nbsp;</div>
</div>