使用分数和屏幕大小百分比时，CSS网格创建不成比例的布局

Question

我一直在使用我的React App使CSS Grid正常工作时遇到一些麻烦。当我使用grid-template-columns: 1fr 3fr 1fr;时，其中一个1fr列比另一个小得多（因此右边的空间比左边的空间要小得多，与中间列相比）。这有什么特别的原因吗？这是我的其余CSS：

#main-body {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-auto-rows: 100px;
  background-color: white;
}

#main-header {
  color: white;
  background-color: darkcyan;
  grid-column-start: 2;
  grid-row-start: 1;
  text-align: center;
  display: inline;
}

#quote-render-block {
  text-align: center;
  background-color: orange;
  grid-column: 2;
  grid-row-start: 2;
}

Answer 1

可能存在除主体之外的另一个子反应组件或者正在创建该问题的父组件的一些样式。您可以在此处查看代码的codepen：https://codepen.io/sakettawde/pen/yxvoxM

HTML：

<div class="main-body">
  <div class="main-header">
    </div>
  <div class="quote-render-block">
    </div>
</div>

CSS：

.main-body {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-auto-rows: 100px;
  background-color: white;
}

.main-header {
  color: white;
  background-color: darkcyan;
  grid-column-start: 2;
  grid-row-start: 1;
  text-align: center;
  display: inline;
}

.quote-render-block {
  text-align: center;
  background-color: orange;
  grid-column: 2;
  grid-row-start: 2;
}

Answer 2

父元素可能具有“填充权限”CSS属性，该属性正在移动屏幕的内容。