Why are grid items not centered?

问题

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>

回答1:

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>

来源：https://stackoverflow.com/questions/47723114/why-are-grid-items-not-centered