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

Issue

I have a simple page layout with a side section and a main section. I want my main section to be 3x the side section so I specified a template for areas like so:

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

However the side section is growing way larger than expected, making the main section very small.

Expected behavior:

Actual behavior:

Here's the code:

.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>

I did read this Preventing a Grid Blowout article, but in that article they are using constant pixel value for one of the columns, which will not work for me. I want the main section to be 3x the side section, without specifying a constant pixel size for either of the sections.

Solution

Don't define areas, define sizes using the fr unit

.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>

Answered By - Temani Afif