CSS 网格问题。停止增长侧列[重复]

Question

我需要一些关于 Grid 的帮助或解释。我有两个网格列。当我的一个网格列内容的文本增长时，另一列也增长相同。我不想给他们静态的高度，因为他们的内容总是会改变。我怎样才能阻止这个？这是现场版的代码笔- Code Pen Example

 .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

在 .side 列上设置 height: fit-content; 就足够了

Answer 2

简单的回答：你不能！网格就像一张桌子。 a 如果一行的网格高度设置为自动，那么它将适应同一行内的最大元素。

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

但是，您可以在网格单元格中创建子 div 以根据需要对其进行格式化。