Question

我有一个css网格，里面有多个项目。知道它可以覆盖整个宽度。我想要的是限制容器的宽度（例如使其仅为700px），而不是覆盖整个宽度。

我尝试使用容器的宽度或最大宽度属性，但没有一个成功。容器内的内容溢出。我应该遗漏一些东西，但不知道是什么。

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

＆＃13;

httpStatus":500

＆＃13;

@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;
}

＆＃13;

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时，这是：

的简写

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

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

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

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

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

要进行说明，请将容器的宽度设置为1400px，然后删除padding: 15px。网格项目开始以1399px溢出。

如果您停用grid-gap: 4px，您会发现您的布局可以很好地扩展，而不会出现任何溢出。

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

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

1 个答案: