根据第二列百分比宽度动态填充 CSS 网格

Question

我正在使用 CSS 网格并尝试创建一个包含两列的布局，其中一列具有百分比宽度，另一列将根据设置的百分比宽度动态填充。

我是不是想多了，还是 CSS 网格不可行？我已在 Flexbox 中完成此操作，因此我不会寻找有关该方法的任何答案。

<div class="grid-row">
  <div class="content">
  Page content here.
  </div>
  <aside class="sidebar">
  Sidebar content here.
  </aside>
</div>

Answer 1

只需使用grid-template-columns: X% 1fr

.grid-row {
  display: grid;
  grid-template-columns: 70% 1fr;
}

* {
  outline:1px solid grey;
}

<div class="grid-row">
  <div class="content">
  Page content here.
  </div>
  <aside class="sidebar">
  Sidebar content here.
  </aside>
</div>

Dynamically Fill CSS Grid Based on Second Column Percentage Width