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

Question

我在让 CSS Grid 与我的 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

除了主体或父组件的某些样式之外，可能还有另一个子反应组件会造成问题。您可以在此处查看代码的 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

一个父元素可能有一个“padding-right”CSS 属性来改变屏幕的内容。