CSS Grid sorunu. Yan sütunun büyümesini durdurun [yinelenen]

Question

Grid hakkında biraz yardıma veya açıklamaya ihtiyacım var. 1 iki ızgara sütununa sahiptir. Sütun ızgara içeriğimden birinin metni büyüdüğünde, diğer sütun da aynı şekilde büyür. 1 onlar için statik yükseklik vermek istemiyorum çünkü içerikleri her zaman değişecektir. 1: Bunu nasıl durdurabilirim? İşte canlı sürüm için kod kalemi - kod PEN Örneği

 .container { 
        margin: 0 auto 0 auto;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 0rem 2.4rem;
    }
    
    .main {
      grid-column: 1/ 9;
      background: red;
    }
    
    .side {
      grid-column : 9/13;
      background: red;
    }

 <div class="container">
          <div class="main">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti voluptatem minima tenetur, quidem consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
            consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
          </div>
          <div class="side">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ipsum.
          </div>
      </div>

Answer 1

height: fit-content;Sütun üzerinde ayar yapmak yeterli olacaktır.

Answer 2

Anwser basit: Yapamazsın! Izgara, masa gibidir. Bir satırın yüksekliğinden itibaren ızgara Otomatik olarak ayarlanmışsa, o zaman aynı satırdaki en büyük öğeyi uyarlayacaktır.

.container { 
        margin: 0 auto 0 auto;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 0rem 2.4rem;
    }
    
    .main {
      grid-column: 1/ 9;
      background: red;
    }
    
    .side {
      grid-column : 9/13;
    }

.sideSub {
  background-color: red;
}

<div class="container">
          <div class="main">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam deleniti voluptatem minima tenetur, quidem consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
            consequatur velit deserunt nemo sint, numquam aspernatur molestias eum aperiam. Obcaecati impedit rerum itaque, adipisci laudantium totam ipsum dolorum. Vel unde id sapiente! Consequatur velit, voluptatibus culpa, vel quis tempore repellendus eum, tenetur dolor commodi quos.
          </div>
          <div class="side">
            <div class="sideSub">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam, ipsum.
            </div>
          </div>
      </div>

ancak dilediğiniz gibi biçimlendirmek için bir ızgara hücresi içinde diV'ler oluşturabilirsiniz.