如何使用 CSS Grid 制作一列具有最大尺寸的布局答案

【问题标题】：How to use CSS Grid to make layout where one column has a maximum size如何使用 CSS Grid 制作一列具有最大尺寸的布局
【发布时间】：2022-11-19 18:49:45
【问题描述】：

我正在尝试使用“页面”进行布局。我会有 3 列，第 1 列和第 3 列只使用 10% 的空间，中间的 80%。直到没有问题为止。但我希望一旦中间部分达到 64rem，它只会增长第一列和最后一列。

目前我试过这个：

.container {
  display: grid;
  grid-template-columns: 10% minmax(80%, 64rem) 10%;
  grid-template-rows: min-content auto;
  min-height: 100vh;
  background-color: red;
}

.header {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: blue;
}

.content {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: yellow;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
    content
  </div>
</div>

但它不会停留在 64 rem。知道如何解决这个问题吗？

【问题讨论】：

标签： html css

【解决方案1】：

您需要换个思路，在容器本身上设置 width 和 max-width。然后你的模板变成：1fr auto 1fr，两边都会增长到中间列允许的程度。

下面的例子

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: min-content auto;
  min-height: 100vh;
  background-color: red;
}

.header {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: blue;
}

.content {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background-color: yellow;
  width:80vw;/* where the parent container fills the whole screen's width */
  max-width:64rem;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="content">
    content
  </div>
</div>

【讨论】：