CSS 网格在使用分数和屏幕尺寸百分比时创建不成比例的布局

Question

我在让 CSS 网格与我的 React 应用程序正常工作时遇到了一些麻烦。当我使用 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

除了主体之外，可能还有另一个子 React 组件，或者父组件的一些样式会产生问题。您可以在此处查看代码的代码笔: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;
}