Make grid children items shrink or grow according to item content itself - css-grid

Question

I made a simple grid of two columns and two rows, was easy. But for the content inside it wasn't.
I have added snippet here, when I use grid-template-rows with auto or with 4 1fr it gives me sections that is identical in height according to biggest section.
What I want is 4 sections that shrinks when content is less, like in sections have only a number.
To clarify more, I want these parts with green background and very small content to shrink to fit the content only.
UPDATE 1: I added a photo to clarify what I want to achieve with this. You will notice that rows on right and left align together according to content.
The part with aqua color will make its content expand to fit the content, and the part with blue background with expand because the aqua background part is bigger.
I want these parts only expand when there is content only BUT I want both to expand with it or get smaller if there no content.
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}
.grid-section{
background: blue;
display: grid;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
.grid-section div:nth-child(1){
background: yellow;
}
.grid-section div:nth-child(2){
background: green;
}
<section>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
2
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
</div>
</section>

Answer 1

I just set the height with max-content. So the height is gonna fit the content dynamically.
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(4, 1fr);
grid-gap: 20px;
}
.grid-section{
background: blue;
display: grid;
grid-template-rows: repeat( 4, minmax(1px, 1fr) );
}
.grid-section div:nth-child(1){
background: yellow;
}
.grid-section div:nth-child(2){
background: green;
height: max-content
}
<section>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
2
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
</div>
</section>

Answer 2

Is this the result you want you to achieve? Simply used grid-auto-rows: auto; in .grid-section. More about grid-auto-rows.
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}
.grid-section{
background: blue;
display: grid;
grid-auto-rows: auto; /* replaced grid-template-rows with this */
}
.grid-section div:nth-child(1){
background: yellow;
}
.grid-section div:nth-child(2){
background: green;
}
<section>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
<div>
2
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
</div>
<div>
1
</div>
</div>
<div class="grid-section">
<div>
1
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries
</div>
<div>
1
</div>
</div>
</section>
UPDATED
If you need left and right blocks in each row to be the same height - you have to use one single grid element instead of two separated. This is the only way to synchronize each row height using CSS. Made one single grid with grid-auto-rows: auto;
section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
grid-column-gap: 20px;
grid-row-gap: 1px;
}
section div {
background: cyan;
}
<section>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries
</div>
<div>
1
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</div>
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries
</div>
<div>
1
</div>
<div>
2
</div>
<div>
1
</div>
</section>