0

I am trying to figure out if there is a CSS only way to fill the remaining vertical space of CSS grid layout.

Here is a CodePen with initial layout and the code snippet:

body {
  max-width: 900px;
  margin: 30px auto;
  background: #e1e4e5;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: start;
  grid-gap: 20px;
}

.grid-item {
  padding: 20px;
  background: #fff;
  border-radius: 0.2rem;
  z-index: 3;
  box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.1), 0 0.07rem 0.2rem rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

.grid-item span {
  padding: 10px;
  display: inline-block;
  vertical-align: bottom;
  background-color: tomato;
  font-weight: bold;
  font-size: 18px;
}

.a {
  grid-column: 1 / 4;
  grid-row: 1/3;
}

.b {
  grid-column: 4;
  grid-row: 1;
}

.c {
  grid-column: 1/4;
  grid-row: 3/4;
}

.d {
  grid-column: 4;
  grid-row: 2;
}
<div class="grid">
  <div class="grid-item a">
    <span>1.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed nisi lacus sed viverra tellus. In eu mi bibendum neque egestas congue quisque egestas. Pretium fusce id
    velit ut tortor. Id diam vel quam elementum pulvinar etiam non. Ut faucibus pulvinar elementum integer enim neque volutpat. Habitasse platea dictumst quisque sagittis. Cum sociis natoque penatibus et magnis dis parturient. Convallis convallis tellus
    id interdum. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Dignissim enim sit amet venenatis urna cursus eget. Fermentum dui faucibus in ornare quam. Mauris pharetra et ultrices neque ornare aenean euismod. Consequat interdum varius sit
    amet mattis. Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Nunc aliquet bibendum enim facilisis gravida neque. Varius sit amet mattis vulputate enim nulla aliquet
    porttitor lacus. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Purus in mollis nunc sed id semper risus. Egestas dui id ornare arcu odio ut. Elementum integer enim neque volutpat ac tincidunt vitae semper quis.
    Sed nisi lacus sed viverra. Sollicitudin aliquam ultrices sagittis orci. Orci phasellus egestas tellus rutrum. Pellentesque id nibh tortor id. Id porta nibh venenatis cras sed felis eget. Imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor.
    Neque gravida in fermentum et sollicitudin ac. Molestie at elementum eu facilisis sed odio. Odio ut enim blandit volutpat maecenas volutpat. Tellus at urna condimentum mattis pellentesque id nibh tortor. Id venenatis a condimentum vitae sapien pellentesque
    habitant morbi tristique.
  </div>
  <div class="grid-item b"><span>2.</span> Lorem ipsum dolor sit amet</div>
  <div class="grid-item c"><span>3.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Euismod elementum nisi quis eleifend. Consequat mauris nunc congue nisi vitae. Sed nisi lacus sed viverra tellus
    in hac. Tristique risus nec feugiat in fermentum posuere urna. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Placerat in egestas erat imperdiet sed euismod nisi. Viverra accumsan in nisl nisi scelerisque eu ultrices. Laoreet
    non curabitur gravida arcu ac tortor dignissim. Enim nulla aliquet porttitor lacus luctus accumsan. Dictum at tempor commodo ullamcorper a lacus vestibulum sed. Interdum velit laoreet id donec ultrices tincidunt arcu. Vitae turpis massa sed elementum
    tempus egestas sed sed. In egestas erat imperdiet sed euismod nisi porta lorem. Et ultrices neque ornare aenean euismod elementum nisi quis eleifend. Lobortis scelerisque fermentum dui faucibus in. Phasellus vestibulum lorem sed risus ultricies tristique.
    Lectus sit amet est placerat in egestas erat imperdiet. Volutpat odio facilisis mauris sit amet massa vitae tortor. At auctor urna nunc id. Id semper risus in hendrerit gravida rutrum quisque. Ultricies integer quis auctor elit sed. Morbi tincidunt
    augue interdum velit. Diam vulputate ut pharetra sit amet. Vulputate sapien nec sagittis aliquam malesuada bibendum. Velit ut tortor pretium viverra suspendisse. Laoreet non curabitur gravida arcu ac tortor. Massa id neque aliquam vestibulum morbi
    blandit cursus risus at. Eget duis at tellus at urna. Mauris commodo quis imperdiet massa tincidunt. Et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Duis convallis convallis tellus id interdum velit laoreet id. Elit scelerisque mauris
    pellentesque pulvinar pellentesque habitant morbi tristique senectus. Fermentum dui faucibus in ornare quam. Amet cursus sit amet dictum sit amet. Sagittis id consectetur purus ut faucibus pulvinar elementum. Eu non diam phasellus vestibulum lorem.
    Vel pretium lectus quam id leo. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Felis eget nunc lobortis mattis aliquam faucibus purus in. Porta nibh venenatis cras sed felis eget velit aliquet. Integer feugiat scelerisque
    varius morbi enim nunc faucibus a pellentesque. Dolor morbi non arcu risus quis varius quam quisque. Vitae auctor eu augue ut. A scelerisque purus semper eget duis at tellus. Nunc mi ipsum faucibus vitae aliquet. Lacinia quis vel eros donec. Turpis
    egestas maecenas pharetra convallis posuere. At auctor urna nunc id cursus metus aliquam eleifend mi. Nullam eget felis eget nunc.</div>
  <div class="grid-item d"><span>4.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In mollis nunc sed id semper risus in hendrerit gravida. Ac felis donec et odio pellentesque diam volutpat. Diam
    sit amet nisl suscipit. Aliquam etiam erat velit scelerisque in dictum non. Ut diam quam nulla porttitor. Ornare arcu dui vivamus arcu felis bibendum ut. Placerat vestibulum lectus mauris ultrices eros in. Sed sed risus pretium quam. Donec ac odio
    tempor orci dapibus ultrices. Felis imperdiet proin fermentum leo. Est ullamcorper eget nulla facilisi. Ornare arcu dui vivamus arcu felis bibendum. Dui sapien eget mi proin sed libero enim sed. Blandit volutpat maecenas volutpat blandit aliquam etiam
    erat velit scelerisque. Suscipit tellus mauris a diam maecenas sed enim ut. Ipsum nunc aliquet bibendum enim. Augue mauris augue neque gravida in fermentum et sollicitudin. Massa vitae tortor condimentum lacinia quis vel. In arcu cursus euismod quis
    viverra nibh. Suspendisse in est ante in nibh. Nec sagittis aliquam malesuada bibendum. Nisi lacus sed viverra tellus. Lectus proin nibh nisl condimentum id. A pellentesque sit amet porttitor eget dolor. Lectus quam id leo in vitae turpis massa. Quam
    lacus suspendisse faucibus interdum posuere. Elementum nisi quis eleifend quam. Viverra adipiscing at in tellus integer feugiat. Maecenas volutpat blandit aliquam etiam. Nisi vitae suscipit tellus mauris. Tempor orci dapibus ultrices in iaculis. Volutpat
    odio facilisis mauris sit. Nisl pretium fusce id velit. Enim lobortis scelerisque fermentum dui faucibus in ornare. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Semper viverra nam libero justo.</div>
</div>

P.S. I know that there are ways to achieve this by using JS or setting row height to a fixed value but wondering if there are other ways.

Update. To more clarify the question I am attaching a screenshot. Block #3 must fill the space under block #1.

enter image description here

albert_rar
  • 19
  • 1
  • 3
  • is this what you try to do : https://codepen.io/gc-nomade/pen/gOYRPEg ? if yes, then update the values of rows spanning and position so they can imbricate – G-Cyrillus Aug 28 '19 at 19:50
  • Hello, @G-Cyr. Thanks, it helped me to find the answer after a bit modifying your code! A few things to note: 1) You removed `align-items: start;` but this way block #1 will fill the remaining space by itself https://nimb.ws/BkRf56 2) To let the block #3 fill that space I edited `.c` CSS like so: `.c { grid-column: 1/4 ; grid-row: 3/4; }` The full code can be found in the initial codepen – albert_rar Aug 29 '19 at 08:47

0 Answers0