Prevent item stretch in CSS grid column

user_3575029 0
Viewed 1337

I have the following HTML and CSS:

.grid {
  display: grid;
  grid-template-areas:
    '. b b b b b b . p p p .'
    '. b b b b b b . s s s .';
  
  &__item {
    align-self: start;
    background-color: #999;
    
    &--body {
      grid-area: b;
      height: 20rem;
    }
    
    &--primarySidebar {
      grid-area: p;
    }
    
    &--secondarySidebar {
      grid-area: s;
    }
  }
}
<div class="grid">
  <div class="grid__item grid__item--body">
    Body
  </div>
  <div class="grid__item grid__item--primarySidebar">
    Primary sidebar
  </div>
  <div class="grid__item grid__item--secondarySidebar">
    Secondary sidebar
  </div>
</div>

The output looks like this:

enter image description here

Codepen here: https://codepen.io/CaribouCode/pen/RwgRPvb

It looks like primarySidebar has stretched to fill 50% of the overall height. How do I prevent it doing that, and therefore remove the space between primarySidebar and secondarySidebar?

Note: It's essential I use grid and this DOM structure for other reasons, so what I'm looking for here is some CSS properties I can add to avoid the unwanted vertical space.

css-grid sass css html
3 Answers

An option is to change the flow to column and specify the first two rows as auto, then tell the primary area to span 3 rows...like so.

.grid {
  display: grid;
  width:100%;
  gap: 0.5em;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto auto 1fr;
  grid-auto-flow: column;
}

.grid__item {
  background-color: #999;
}

.grid__item--body {
  grid-column: span 8;
  grid-row: span 3;
  height: 20rem;
}

.grid__item--primarySidebar {
  grid-column: span 4;
}

.grid__item--secondarySidebar {
  grid-column: span 4;
}
<div class="grid">
  <div class="grid__item grid__item--body">
    Body
  </div>
  <div class="grid__item grid__item--primarySidebar">
    Primary sidebar Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sint recusandae non ipsum vitae in vel labore quia corporis magni.
  </div>
  <div class="grid__item grid__item--secondarySidebar">
    Secondary sidebar Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sint recusandae non ipsum vitae in vel labore quia corporis magni
  </div>
</div>

user_28020400 

.grid {
  display: grid;
  gap: 2px;
  /* define the number of grid columns */
  grid-template-columns: repeat( 12, minmax(250px, 1fr) );
  grid-template-rows: auto auto 1fr;
  grid-auto-flow: column;
}

.grid__item {
  background-color: #999;
}

.grid__item--body {
  grid-column: 1;
  grid-row: span 3;
  height: 20rem;
}

.grid__item--primarySidebar {
  grid-column: 2;
  white-space: break-spaces;
}

.grid__item--secondarySidebar {
  grid-column: 2;
  white-space: break-spaces;
}
<div class="grid">
  <div class="grid__item grid__item--body">
    Body
  </div>
  <div class="grid__item grid__item--primarySidebar">
    Primary sidebar
  </div>
  <div class="grid__item grid__item--secondarySidebar">
    Secondary sidebar
  </div>
</div>

user_164963570

I think it's not a grid problem - you added 20rem height in body, but didn't in sidebars - you can try to add 10rem each, or 100%

user_74836660
Related