我假设数据是柱状的：项目不与其左侧和右侧的项目相关，而是与其上方和下方的项目相关。在这种情况下，你应该修改HTML标记：

#data {
  display: flex;
  flex-direction: row;
}

#data > div > div {
  background-color: yellow;
  margin-bottom: .5em;
  margin-right: .5em;
}

#data > div > div:empty {
  display: none;
}

<div id="data">
  <div>
    <div>Column 1</div>
    <div>Column 1</div>
  </div>
  <div>
    <div>Column 2</div>
    <div>Column 2</div>
  </div>
  <div>
    <div><!-- empty --></div>
    <div>Column 3</div>
  </div>
  <div>
    <div>Column 4</div>
    <div>Column 4</div>
  </div>
</div>

另一个例子，使用语义标记和CSS网格来很好地对齐单元格：

/* reset */
dl {
  margin: 0;
}
dt {
  background-color: orange;
}
dd {
  margin: 0;
  background-color: yellow;
}
/* grid layout */
dl {
  display: grid;
  grid-auto-flow: column;
  gap: .5em;
}
dt:nth-of-type(2),
dt:nth-of-type(2) ~ dd {
  grid-column-start: 2;
}
dt:nth-of-type(3),
dt:nth-of-type(3) ~ dd {
  grid-column-start: 3;
}
dt:nth-of-type(4),
dt:nth-of-type(4) ~ dd {
  grid-column-start: 4;
}
dd:empty {
  display: none;
}

<dl>
  <dt>Heading 1</dt>
  <dd>Value 1<br>another line</dd>
  <dd>Value 2</dd>
  <dt>Heading 2</dt>
  <dd>Value 1</dd>
  <dd>Value 2</dd>
  <dt>Heading 3</dt>
  <dd><!-- empty --></dd>
  <dd>Value 2</dd>
  <dt>Heading 4</dt>
  <dd>Value 1</dd>
  <dd>Value 2</dd>
</dl>