具有最大宽度的网格项目溢出容器

Question

我有一个 css 网格和其中的多个项目。正确知道它覆盖了可能的整个宽度。我想要的是限制容器的宽度（比如让它只有700px）而不是覆盖整个宽度。

我已尝试为容器使用宽度或最大宽度属性，但 none 成功了。容器内的内容溢出。我应该遗漏了什么但不知道是什么。

这是代码笔： https://codepen.io/sercanyilmaz/full/YaRmPN/

@import url('https://fonts.googleapis.com/css?family=Muli');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

.wrapper {
  display: grid;
  grid-template-columns: repeat(350, 1fr);
  grid-template-rows: repeat(33, 1fr);
  grid-gap: 4px;
  grid-row-gap: 5px;
  background-color: #a5adb0;
  border-radius: 5px;
  color: #ddd;
  padding: 15px;
  font-family: 'Muli';
}

.func {
  grid-column: span 25;
  grid-row: span 3;
  border-radius: 5px;
  background: #20252A;
  display: grid;
  align-items: center;
  justify-items: center;
  border-bottom: 5px solid #000;
  cursor: pointer;
}

.num {
  grid-column: span 24;
  grid-row: span 6;
  border-radius: 5px;
  background: #20252A;
  display: grid;
  align-items: center;
  justify-items: center;
  border-bottom: 5px solid #000;
  cursor: pointer;
}

.back {
  grid-column: span 38;
}

.letters {
  grid-column: span 24;
  grid-row: span 6;
  border-radius: 5px;
  background: #20252A;
  display: grid;
  align-items: center;
  justify-items: center;
  border-bottom: 5px solid #000;
  cursor: pointer;
}

.tab {
  grid-column: span 38;
}

.caps {
  grid-column: span 42;
}

.enter {
  grid-column: span 44;
}

.left-shift {
  grid-column: span 50;
}

.right-shift {
  grid-column: span 60;
}

.fn {
  grid-column: span 22;
}

.left-command,
.right-command {
  grid-column: span 28;
}

.space {
  grid-column: span 120;
}

.up {
  grid-row: span 3;
}

.down {
  grid-row: span 3;
  border-bottom: 0px;
  border-top: 5px solid #000;
  ;
}

.left,
.right {
  grid-column: span 28;
}

.func:active,
.num:active,
.letters:active {
  border-bottom: 5px inset #20252A;
  background: #111;
}

.down:active {
  border-bottom: 0px !important;
  border-top: 5px inset #20252A;
  background: #111;
}

<div class="wrapper">

  <!-- first row -->

  <div class="func">esc</div>
  <div class="func">F1</div>
  <div class="func">F2</div>
  <div class="func">F3</div>
  <div class="func">F4</div>
  <div class="func">F5</div>
  <div class="func">F6</div>
  <div class="func">F7</div>
  <div class="func">F8</div>
  <div class="func">F9</div>
  <div class="func">F10</div>
  <div class="func">F11</div>
  <div class="func">F12</div>
  <div class="func">F13</div>

  <!-- second row -->

  <div class="num">~<br/>`</div>
  <div class="num">!<br/>1</div>
  <div class="num">@<br/>2</div>
  <div class="num">#<br/>3</div>
  <div class="num">$<br/>4</div>
  <div class="num">%<br/>5</div>
  <div class="num">^<br/>6</div>
  <div class="num">&<br/>7</div>
  <div class="num">*<br/>8</div>
  <div class="num">(<br/>9</div>
  <div class="num">)<br/>0</div>
  <div class="num">-<br/>_</div>
  <div class="num">+<br/>=</div>
  <div class="num back">delete</div>

  <!-- third row -->

  <div class="letters tab"><i class="material-icons">&#xe31c;</i></div>
  <div class="letters">Q</div>
  <div class="letters">W</div>
  <div class="letters">E</div>
  <div class="letters">R</div>
  <div class="letters">T</div>
  <div class="letters">Y</div>
  <div class="letters">U</div>
  <div class="letters">I</div>
  <div class="letters">O</div>
  <div class="letters">P</div>
  <div class="letters">{<br/>[</div>
  <div class="letters">}<br/>]</div>
  <div class="letters">|<br/>/</div>

  <!-- fourth row -->

  <div class="letters caps">caps lock</div>
  <div class="letters">A</div>
  <div class="letters">S</div>
  <div class="letters">D</div>
  <div class="letters">F</div>
  <div class="letters">G</div>
  <div class="letters">H</div>
  <div class="letters">J</div>
  <div class="letters">K</div>
  <div class="letters">L</div>
  <div class="letters">:<br/>;</div>
  <div class="letters">"<br/>'</div>
  <div class="letters enter">enter<br/>return</div>

  <!-- fifth row -->

  <div class="letters left-shift">shift</div>
  <div class="letters">Z</div>
  <div class="letters">X</div>
  <div class="letters">C</div>
  <div class="letters">V</div>
  <div class="letters">B</div>
  <div class="letters">N</div>
  <div class="letters">M</div>
  <div class="letters">
    <<br/>,</div>
  <div class="letters">><br/>.</div>
  <div class="letters">?<br/>\</div>
  <div class="letters right-shift">shift</div>

  <!-- sixth row -->

  <div class="letters fn">fn</div>
  <div class="letters">control</div>
  <div class="letters">option</div>
  <div class="letters left-command">⌘<br/>command</div>
  <div class="letters space"></div>
  <div class="letters right-command">⌘<br/>command</div>
  <div class="letters">option</div>
  <div class="letters left">&larr;</div>
  <div class="letters up">&uarr;</div>
  <div class="letters right">&rarr;</div>
  <div class="letters down">&darr;</div>
</div>

Answer 1

问题出在您在网格容器上设置的grid-column-gap。

.wrapper {
    display: grid;
    grid-template-columns: repeat(350, 1fr);
    grid-template-rows: repeat(33, 1fr);
    grid-gap: 4px; <----- PROBLEM HERE
    grid-row-gap: 5px;
    background-color: #a5adb0;
    border-radius: 5px;
    color: #ddd;
    padding: 15px;
    font-family: 'Muli';
}

当您设置 grid-gap: 4px 时，即 shorthand for:

grid-row-gap: 4px
grid-column-gap: 4px

（顺便说一下，shorthand 中设置的 grid-row-gap 会被您的下一行代码覆盖。）

现在看看你设置了多少列：

grid-template-columns: repeat(350, 1fr)

现在乘以 350 * 4px。 网格行的最小可能宽度为 1400 像素。

为了便于说明，请将容器的宽度设置为 1400 像素并删除 padding: 15px。网格项目在 1399px 处开始溢出。

如果您禁用 grid-gap: 4px，您会发现您的布局可以很好地缩放而没有任何溢出。

根据您想要 space 键的方式，您必须在列间距上测试不同的单位，例如直线百分比 (%) 或视口百分比 (vh、vw、vmin、vmax 等）。或者考虑使用更少（更宽）的列。

具有最大宽度的网格项目溢出容器

Grid items overflow container with max width

html

css

overflow

css-grid