Сделать дочерние элементы сетки уменьшаться или увеличиваться в соответствии с содержимым самого элемента

Question

Я сделал простую сетку из двух столбцов и двух строк, это было легко. Но для содержимого внутри этого не было.

Я добавил сюда фрагмент, когда я использую grid-template-rows с авто или с 4 1fr, он дает мне разделы, которые идентичны по высоте в соответствии с самым большим разделом.

Мне нужно 4 раздела, которые сжимаются, когда содержание меньше, например, в разделах есть только номер.

Чтобы уточнить, я хочу, чтобы эти части с зеленым фоном и очень маленьким содержимым сжимались только для содержания.

ОБНОВЛЕНИЕ 1: Я добавил фото, чтобы прояснить, чего я хочу этим достичь. Вы заметите, что строки справа и слева выровнены вместе в соответствии с содержимым.

Часть с цветом морской волны заставит ее содержимое расширяться, чтобы соответствовать содержимому, а часть с синим фоном с расширением, потому что часть цвета морской волны является больше.

Я хочу, чтобы эти части расширялись только тогда, когда есть только контент, НО я хочу, чтобы оба расширялись вместе с ним или уменьшались, если нет контента.

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

Я просто установил высоту с помощью max-content. Таким образом, высота будет соответствовать содержимому динамически.

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

Это тот результат, которого вы хотите достичь? Просто используется grid-auto-rows: auto; в .grid-section. Подробнее о 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>

ОБНОВЛЕНО

Если вам нужно, чтобы левый и правый блоки в каждой строке были одинаковой высоты - вам необходимо используйте один элемент сетки вместо двух отдельных. Это единственный способ синхронизировать высоту каждой строки с помощью CSS. Сделал одну единую сетку с 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>