Проблема с CSS Grid. Остановить рост бокового столбца [дубликат]

Aug 19 2020

Мне нужна помощь или объяснение по поводу Grid. 1 имеет два столбца сетки. Когда текст одного из моих столбцов, содержимое сетки растет, другой столбец также растет. Я не хочу давать им статическую высоту, потому что их содержимое всегда будет меняться. 1: Как это остановить? Вот кодовая ручка для живой версии - пример кода PEN

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

Ответы

Tomas Aug 19 2020 at 01:48

Достаточно установить height: fit-content;на столбце. Side

tacoshy Aug 19 2020 at 01:52

Anwser простой: нельзя! Сетка похожа на таблицу. Если для сетки от высоты строки установлено значение «Авто», то она адаптирует наиболее высокий элемент в той же строке.

.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 в ячейке сетки, чтобы отформатировать ее по своему усмотрению.