1

I have a CSS Grid with 3 grid items. The first item is alone off to the left and the other 2 are stacked on top of each other in the second column. I am trying to make it so that the 2 items stacked on top of each other use auto height, disregarding the height of the first grid item(which is much taller). Unfortunately, since the left item and the top right item are in the same row, the top right item takes on the height of the taller item on the left. How can I resolve this?

Here's an example of my desired output: enter image description here

.container {
  display:-ms-grid;
  display:grid;
  -ms-grid-columns: 70% 30%;
  grid-template-columns: 70% 30%;
  -ms-grid-rows:auto auto;
  grid-template-rows: auto auto;
}
.container .item.top {
  -ms-grid-column-span: 1;
  -ms-grid-column: 2;
  grid-column: 2 / span 1;
  -ms-grid-row-span: 1;
  grid-row: 2 / 2;
}
<div class="container">
  <div class="item tall">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet erat sodales purus feugiat scelerisque. Proin rutrum volutpat enim sit amet porta. Duis accumsan mauris vel ligula bibendum eleifend. Maecenas pellentesque arcu lacus, in ultrices ante ornare sit amet. Duis non quam est. Nunc pulvinar nisl lectus, vitae pretium risus finibus vel. Fusce sed tempor diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris laoreet interdum commodo. Sed laoreet enim eget enim consectetur molestie. Ut tristique convallis mi quis interdum. Fusce diam nibh, facilisis vitae pretium sed, tristique vitae urna. Nunc cursus iaculis porta. Donec lacinia risus quam, a aliquam libero bibendum quis.</p>

  <p>Curabitur euismod nec justo ut scelerisque. Cras ultricies nec justo eu mattis. Aliquam elementum rhoncus dolor eget maximus. Suspendisse varius fermentum quam sit amet pretium. Integer tempor porttitor nunc, sed volutpat lorem. Donec hendrerit vitae est ac hendrerit. Praesent volutpat mi ipsum, in congue metus bibendum vel. Sed gravida lacinia nunc, vitae iaculis dui iaculis eget.</p>
  </div>
  <div class="item top">
    <!-- This item should be the same height as the next one -->
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="item bottom">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
user13286
  • 3,027
  • 9
  • 45
  • 100

1 Answers1

1

Just set column-row as spanned for the two rows of the second column on the taller item (.container .item.tall):

.container {
  display:-ms-grid;
  display:grid;
  -ms-grid-columns: 70% 30%;
  grid-template-columns: 70% 30%;
  -ms-grid-rows:auto auto;
  grid-template-rows: auto auto;
}
.container .item.tall {
  grid-column: 1;
  grid-row: 1 / span 2;
 }
.container .item.top {
  -ms-grid-column-span: 1;
  -ms-grid-column: 2;
  grid-column: 2 / span 1;
  -ms-grid-row-span: 1;
  grid-row: 2 / 2;
}
<div class="container">
  <div class="item tall">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet erat sodales purus feugiat scelerisque. Proin rutrum volutpat enim sit amet porta. Duis accumsan mauris vel ligula bibendum eleifend. Maecenas pellentesque arcu lacus, in ultrices ante ornare sit amet. Duis non quam est. Nunc pulvinar nisl lectus, vitae pretium risus finibus vel. Fusce sed tempor diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris laoreet interdum commodo. Sed laoreet enim eget enim consectetur molestie. Ut tristique convallis mi quis interdum. Fusce diam nibh, facilisis vitae pretium sed, tristique vitae urna. Nunc cursus iaculis porta. Donec lacinia risus quam, a aliquam libero bibendum quis.</p>

  <p>Curabitur euismod nec justo ut scelerisque. Cras ultricies nec justo eu mattis. Aliquam elementum rhoncus dolor eget maximus. Suspendisse varius fermentum quam sit amet pretium. Integer tempor porttitor nunc, sed volutpat lorem. Donec hendrerit vitae est ac hendrerit. Praesent volutpat mi ipsum, in congue metus bibendum vel. Sed gravida lacinia nunc, vitae iaculis dui iaculis eget.</p>
  </div>
  <div class="item top">
    <!-- This item should be the same height as the next one -->
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="item bottom">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

EDIT:

If you want the box on the top as you show on the image, you can increment the number of rowspans on the same code. But probably, you are using a grid syntax when you need only a simple inline-block or most simple float.

For the example of your image:

.container {
  display:-ms-grid;
  display:grid;
  -ms-grid-columns: 70% 30%;
  grid-template-columns: 70% 30%;
  -ms-grid-rows:auto auto;
  grid-template-rows: auto auto;
}
.container .item.tall {
  grid-column: 1;
  grid-row: 1 / span 4;
 }
.container .item.top {
  -ms-grid-column-span: 1;
  -ms-grid-column: 2;
  grid-column: 2 / span 1;
  -ms-grid-row-span: 1;
  grid-row: 2 / 2;
}
<div class="container">
  <div class="item tall">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet erat sodales purus feugiat scelerisque. Proin rutrum volutpat enim sit amet porta. Duis accumsan mauris vel ligula bibendum eleifend. Maecenas pellentesque arcu lacus, in ultrices ante ornare sit amet. Duis non quam est. Nunc pulvinar nisl lectus, vitae pretium risus finibus vel. Fusce sed tempor diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris laoreet interdum commodo. Sed laoreet enim eget enim consectetur molestie. Ut tristique convallis mi quis interdum. Fusce diam nibh, facilisis vitae pretium sed, tristique vitae urna. Nunc cursus iaculis porta. Donec lacinia risus quam, a aliquam libero bibendum quis.</p>

  <p>Curabitur euismod nec justo ut scelerisque. Cras ultricies nec justo eu mattis. Aliquam elementum rhoncus dolor eget maximus. Suspendisse varius fermentum quam sit amet pretium. Integer tempor porttitor nunc, sed volutpat lorem. Donec hendrerit vitae est ac hendrerit. Praesent volutpat mi ipsum, in congue metus bibendum vel. Sed gravida lacinia nunc, vitae iaculis dui iaculis eget.</p>
  </div>
  <div class="item top">
    <!-- This item should be the same height as the next one -->
    <p>Lorem ipsum dolor sit amet</p>
  </div>
  <div class="item bottom">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
  • Thank you for the response, I should have been more specific. I want the height of the items on the right to use `auto` height, so they should both only be as tall as the content within them. I've added an illustration to my question to make it clearer. – user13286 Jun 06 '18 at 16:56
  • 1
    You are using a grid system when you need a simple inline-block or a float. I edit my answer, however, I can edit with a solution with inline-block that's more accurately for your requirements. – Marcos Pérez Gude Jun 06 '18 at 16:58
  • Thank you, the reason I am doing it this way is because I am using the same format throughout the site but in other areas I actually do need the grid system, so I'm just trying to keep my code as clean as possible by reusing existing elements. – user13286 Jun 06 '18 at 16:59
  • 1
    Ok, that's a good reason. So increment the number of rowspan with the maximum number you want, but take care with the number of elements spanned. – Marcos Pérez Gude Jun 06 '18 at 17:01
  • If this answer fits your requirements, please, accept when it's available :) – Marcos Pérez Gude Jun 06 '18 at 17:01
  • You're welcome, call me when you need something about CSS/Javascript :) – Marcos Pérez Gude Jun 07 '18 at 07:48