在css Grid中向包装器添加填充会导致水平滚动答案

【问题标题】：add padding to wrapper in css Grid causes horizontal scroll在css Grid中向包装器添加填充会导致水平滚动
【发布时间】：2019-05-12 16:27:46
【问题描述】：

我会在父 div 中添加填充，这样我的卡片就不会被屏幕限制，这就是我所做的

<div class="padding">
  <div class="wrapper">
    <div class="card">
      <app-character-card></app-character-card>
    </div>
    <div class="card">
      <app-character-card></app-character-card>    
    </div>
    <div class="card">
        <app-character-card></app-character-card>    
    </div>
  </div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    grid-auto-rows: minmax(100px, auto);

}
.padding {

    margin: 10px;

}
.card {

width:100%;
height:100px;
background-color:red;
}

<div class="padding">
  <div class="wrapper">
    <div class="card">
      <app-character-card></app-character-card>
    </div>
    <div class="card">
      <app-character-card></app-character-card>    
    </div>
    <div class="card">
        <app-character-card></app-character-card>    
    </div>
  </div>
</div>

填充导致我水平滚动（我想是 100% 宽度 + 填充）

如何在没有滚动的情况下定义内部填充？

更新

我已将我的课程更新为 padding ，现在我得到的 padding 没有居中

【问题讨论】：

在.padding中使用padding而不是margin
我现在有新的奇怪行为（看看我的更新）
尝试将width:100% 分配给.padding 类
我得到一个更大的宽度，所以它增加了水平滚动

标签： html css css-grid

【解决方案1】：

您上面的代码似乎运行良好。您必须提供更多信息才能跟踪错误。但是应该适用于像您这样的几乎所有情况的事情是为html 和body 元素指定CSS，如下所示：

body, html{ max-width: 100%; }

我希望这行得通。

但如果没有，请提供更多信息，例如代码或其他内容，以便更轻松地找到解决方法。

【讨论】：

【解决方案2】：

在这个来自 Chrome 开发者工具的屏幕截图中，您可以看到不同值的效果。属性margin 用于在元素外部添加间距，但在您的情况下，您想使用padding 将其添加到内部。

.container {
    padding: 10px;
}

【讨论】：