CSS Grid Problem. Stop growing side column

Question

I need some help or explanation about Grid. I have two grid columns. When the text of one of my grid columns content grows the other column also grows same. I don not want to give static height for them because their content will always change. How can I stop this ? Here is the code pen for live version - 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>

use height: fit-content on .side column – xxx Aug 18 '20 at 18:51 — xxx, Aug 18 '20 at 18:51
you need : align-items: flex-start; on the grid container – Temani Afif Aug 18 '20 at 19:24 — Temani Afif, Aug 18 '20 at 19:24

score 0 · Accepted Answer · answered Aug 18 '20 at 18:48

0

It would suffice with setting height: fit-content; on the .side column

answered Aug 18 '20 at 18:48

Tomas

1,001
8
16

score 0 · Answer 2 · answered Aug 18 '20 at 18:52

Simple anwser: You cant! A grid is like a table. a If the grid height of a row is set to auto, then it will adapt tp the alrgest element within the same row.

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

however you can create sub divs within a grid cell to format it as you like.

Thank you for your time @tacoshy. I think the best solution is **height: fit-content;** — Ruslan Bairamovi, Aug 18 '20 at 19:02

CSS Grid Problem. Stop growing side column

2 Answers2