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

Question

我会在父 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 没有居中

标签： htmlcsscss-grid

Answer 1

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

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

我希望这行得通。

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