模拟显示网格中的 colspan

Question

请考虑此代码和Fiddle

HTML：

<div class="container">
<div class="container-row">
    <label>Field1:</label>
    <span>some text</span>
    <label>Field2:</label>
    <span>some text</span>
    <label>Field3:</label>
    <span>some text</span>
    <label>Field4:</label>
    <span>some text</span>
</div>
<div class="container-row">
    <label>Field5:</label>
    <span>some text</span>
    <label>Field6:</label>
    <span>some text</span>
</div>
<div class="container-rowclear">
    <label>Field7:</label>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</span>
</div>
<div class="container-rowclear">
    <label>Field8:</label>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</div>

CSS：

.container {
  width: 95%;
  margin: 10px auto;
  padding: 10px;
  border: 1px solid #f1f1f1;
  box-shadow: 0 6px 6px -2px #6c6c6c;
}

.container-row {
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 3fr;
}

.container-rowclear {
  display: grid;
  grid-template-columns: 2fr 3fr;
}

问题是，类为

container-rowclear

的 div 中的两个单元格未正确显示，并且它们与上面的单元格之间存在间隙：

如何对齐这些单元格并用

colspan

模拟表格中的

display:grid

？

谢谢

Answer 1

最好将所有内容都保留在一个网格内，因为我们还没有子网格。这是一个示例（没有所有这些 div）：

.container {
  display: grid;
  grid-template-columns: repeat(2, 2fr 3fr);
}

.span {grid-column: span 3;}

<div class="container">
  <label>Field1:</label>
  <span>some text</span>
  <label>Field2:</label>
  <span>some text</span>
  <label>Field3:</label>
  <span>some text</span>
  <label>Field4:</label>
  <span>some text</span>
  <label>Field5:</label>
  <span>some text</span>
  <label>Field6:</label>
  <span>some text</span>
  <label>Field7:</label>
  <span class="span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu</span>
  <label>Field8:</label>
  <span class="span">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</div>