Auto row height - игнорировать высоту первого элемента

Question

У меня есть CSS Сетка с 3 элементами сетки.Первый элемент один слева, а остальные 2 сложены друг на друга во втором столбце.Я пытаюсь сделать так, чтобы 2 элемента, накладываемые друг на друга, использовали автоматическую высоту, не учитывая высоту первого элемента сетки (который намного выше).К сожалению, поскольку левый элемент и верхний правый элемент находятся в одной строке, верхний правый элемент принимает высоту более высокого элемента слева.Как я могу решить эту проблему?

Вот пример моего желаемого результата:

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

Answer 1

Просто установите column-row как натянутое для двух строк второго столбца на более высоком элементе (.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>

РЕДАКТИРОВАТЬ:

Если вы хотите, чтобы поле сверху отображалось на изображении, вы можете увеличить количество интервалов строки натот же кодНо, вероятно, вы используете синтаксис сетки, когда вам нужен только простой inline-block или самый простой float.

Для примера вашего изображения:

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