Question

我有一个网格会引起我不想要的水平滚动条，我已经尝试了一些方法，包括将网格放入其他div中。这是css中的网格代码。

.page-grid {
      display: grid;
      grid-template-rows: auto auto;
      grid-template-columns: 60% 40%;
      grid-template-areas:
      "ONE TWO"
      "THREE THREE"
       ;
      align-items: center;
      justify-content: center;
      text-align: center;
      grid-gap: 20px;
      margin-top: 70px;
      background: White;
      max-width:100%;
      box-sizing: border-box;
    }

Answer 1

对于grid-template-columns: 60% 40%，您已经说过应该使用整个宽度。添加grid-gap: 20px会使它进一步扩展，从而导致水平滚动条。

相反，您可以写grid-template-columns: 3fr 2fr

fr代表分数，除了不引起所需的额外像素外，效果基本相同。它将自动调整所有网格间距。

.fractions {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-gap: 20px;
    margin-bottom: 30px;
}
.grid-element {
    height: 80px;
    background: #00ff00;
}

<div class="fractions">
  <div class="grid-element"></div>
  <div class="grid-element"></div>
 </div>

CSS Grid导致水平滚动条

1 个答案: