CODEWITHSUNDEEP
csscss-grid
Kilazur
Kilazur

Reputation: 3188

Specific grid layout with 3 rows, middle one being auto

I want to make a CSS grid looking like this: grid layout

The idea being that the middle row has a fixed size, and the two other rows take half of whatever height is left. I do not know in advance the size of the middle row.

Is it possible with pure CSS, and if so how?

Thanks.

Upvotes: 0

Views: 453

Answers (1)

mahan
mahan

Reputation: 14935

The second row has as much height as the total height of its content. The remaining height is divided evenly between the first and the last row.

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr auto 1fr; /* key rule */
  grid-gap: 10px;
  height: 400px;  
}

.wrapper div {
  background: red;
}

.three {
  grid-column: 1/-1;
}
<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo quis, quas amet non molestias hic nam inventore a, unde expedita distinctio ad. Explicabo deserunt nesciunt eaque facere, hic placeat accusantium. Three Lorem, ipsum dolor sit amet
    consectetur adipisicing elit. Nemo quis, quas amet non molestias hic nam inventore a, unde expedita distinctio ad. Explicabo deserunt nesciunt eaque facere, hic placeat accusantium. Three Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo
    quis, quas amet non molestias hic nam inventore a, unde expedita distinctio ad. Explicabo deserunt nesciunt eaque facere, hic placeat accusantium. Three Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo quis, quas amet non molestias hic
    nam inventore a, unde expedita distinctio ad. Explicabo deserunt nesciunt eaque facere, hic placeat accusantium.
  </div>
  <div class="four">Four</div>
  <div class="five">Five</div>
</div>

The .wrapper has now a fixed height. You should remove this line:

height: 400px;

Upvotes: 1

Related Questions