CSS Grid导致水平滚动条出现。

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

- RavingPlaty

---

请分享您的标记，以便我们可以查看错误的示例。 - Unbranded Manchester

在fiddle上重现您的错误并分享它，这里是一个jsfiddle链接 https://jsfiddle.net/VivekrajuVasudevaraju/Lm4y2eor/#&togetherjs=vlV4yzk16O ，或者分享您的标记。 - vivek raju

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>

- colin