使用网格模板区域时如何防止命名网格区域井喷？

Question

我有一个简单的页面布局，其中包含侧面部分和主要部分。我希望我的主要部分是侧面部分的 3 倍，所以我为这样的区域指定了一个模板：

grid-template-areas: "side main main main";

然而，侧面部分的增长方式比预期的要大，使得主要部分非常小。

预期行为：

实际行为：

代码如下：

.page-layout {
  display: grid;
  grid-template-areas: "side main main main";
}

.main-section {
  background-color: lightgreen;
  grid-area: main;
}

.side-section {
  background-color: orange;
  grid-area: side;
}

.side-layout {
  display: grid;
  grid-auto-rows: minmax(min-content, max-content);
  grid-template-areas: "name" "summary" "summary";
}

.name-section {
  grid-area: name;
}

.summary-section {
  grid-area: summary;
}

<div class="page-layout">
  <div class="side-section side-layout">
    <h2 class="name">
      Side section
    </h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis enim eveniet fugiat impedit laboriosam laudantium magni, maxime, molestiae nemo provident repudiandae.
    </p>
  </div>

  <div class="main-section">
    <h2>Main section</h2>
  </div>
</div>

我确实读过这篇 Preventing a Grid Blowout 文章，但在那篇文章中，其中一列使用了恒定像素值，这对我来说不起作用。我希望主要部分是侧面部分的 3 倍，而不为任何一个部分指定恒定的像素大小。

Answer 1

不要定义面积，使用fr单位定义大小

.page-layout {
  display: grid;
  /*grid-template-areas: "side main main main";*/
  grid-template-columns: 1fr 3fr
}

.main-section {
  background-color: lightgreen;
}

.side-section {
  background-color: orange;
}

.side-layout {
  display: grid;
  /*
   not need since you want the content to define the height
  grid-auto-rows: minmax(min-content, max-content);
  grid-template-areas: "name" "summary" "summary";*/
}

<div class="page-layout">
  <div class="side-section side-layout">
    <h2 class="name">
      Side section
    </h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus blanditiis enim eveniet fugiat impedit laboriosam laudantium magni, maxime, molestiae nemo provident repudiandae.
    </p>
  </div>

  <div class="main-section">
    <h2>Main section</h2>
  </div>
</div>

使用网格模板区域时如何防止命名网格区域井喷？

How to prevent named grid area blowout when using grid-template-areas?

html

css

grid

css-grid