为什么网格项目不居中？ [英] Why are grid items not centered?

问题描述

出于某种原因，两个输入范围会使网格中的顶部两项偏离居中。

我假设这是因为它们的影子DOM样式。这是真的吗？

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

---

解决方案

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

  grid-auto-columns：1fr 
  

现在，不是基于内容大小的容器分配空间，而是在列之间均匀分配空间。 p>

Chrome，在上面进行调整： b
$ b

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

这是由于这种类型的输入的默认设置是由这些浏览器：

Firefox

$ b

  body {margin：0;背景：＃0d0d0d; } #center {width：2px; height：100％; position：absolute; left：calc（50％ -  1px）; background：red;}＃grid {width：80％;身高：30％;位置：绝对;最高：35％;左：10％;显示：网格; grid-template-areas：a a b bc c de e fg g g g; grid-gap：10px;颜色：#fff;盒子尺寸：边框;边框：点缀黄色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 =rangeid =c> < div id =d>< / div> < input type =rangeid =e> < div id =f>< / div> < div id =g>& nbsp;< / div>< / div>  

For some reason two input ranges are making the top two items in the grid off centered.

I am assuming this is because of their shadow DOM styling. Is this actually the case?

Does anybody know why the ranges are making items A and B off centered?

Here is a 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;
}

#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>

解决方案

The Problem

When you don't define the grid column widths using grid-template-columns (for explicit grids) or grid-auto-columns (for implicit grids), the width of each column is left to auto. This means that the widths are determined by the content.

You've defined the layout with grid-template-areas:

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

But you haven't defined the columns, so they are left to their own devices.

In this case, the auto columns result in a visual (but not actual) misalignment in your grid:

As seen in Chrome:

---

Solutions

Since you are working with a four-column implicit grid, you can add this rule to your grid container to fix the problem.

grid-auto-columns: 1fr

Now, instead of the container distributing space based on content size, it distributes space evenly among columns.

Chrome, with the adjustment above:

revised codepen

You can also fix the problem with this rule:

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

revised codepen

---

Browser Variations

By the way, your layout renders differently across Grid-supporting browsers.

Chrome

Firefox

Edge

(I didn't test in Safari.)

Basically, in Firefox and Edge the range input looks like its locked into the first column and doesn't honor the grid-template-areas rule.

This is because of a default setting on this type of input set by these browsers:

Firefox

So basically these inputs are set to width: 12em.

To fix the problem, add this to your code:

input { width: auto }

Now everything should work across all Grid-supporting browsers.

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>

这篇关于为什么网格项目不居中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！