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

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>

​

我确实读过这篇防止电网井喷文章，但在那篇文章中，他们对其中一列使用了常量像素值，这对我来说是行不通的。我希望主部分是侧部分的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>

​