CSS网格问题停止生长侧柱

问题描述

我需要一些有关Grid的帮助或解释。我有两个网格列。当我的一个网格列内容的文本增长时，另一列的内容也增长。我不想为他们定高，因为他们的内容总是会变化的。我该如何阻止呢？这是实时版本的代码笔- Code Pen Example

 span:not("dontwant"){
    font-weight: inherit;
    filter: drop-shadow(0px 0px 0rem black);
    Box-shadow: 0px 0px 0px black
  }

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

解决方法

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

,

简单的答案：你不能！网格就像一张桌子。 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,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来设置其格式。