自动行高 - 忽略第一项的高度

Question

我有一个包含3个网格项的CSS网格。第一个项目单独向左移动，另外两个在第二列中彼此堆叠。我试图使它堆叠在彼此顶部的2个项目使用自动高度，忽略第一个网格项目的高度（更高）。不幸的是，由于左侧项目和右上角项目位于同一行，右上方项目采用左侧较高项目的高度。我该如何解决这个问题？

这是我想要的输出的一个例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需将column-row设置为跨越较高项（.container .item.tall）上第二列的两行：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：

如果您想要在图像上显示顶部的框，则可以增加相同代码上的行扫描数。但是，当您只需要一个简单的inline-block或最简单的float时，您可能正在使用网格语法。

以图片为例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;