Css 响应列表布局，从元素中填充，内部没有固定元素

我有一个动态项目的列表，其中一些可能有一个图标在它的顶部，其中一些没有。我需要从没有图标的元素内部的顶部填充，并且位于元素有图标的行中。项目的宽度是固定的，图标的高度也是固定的。因此，根据屏幕宽度，“网格”可能包含不同的列数。 大概是这样的： 有可能做出这样的布局吗？怎么做

<div class="container">
  <div class="item">
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>
    
  <div class="item item_with-icon">
    <div class="icon"></div>
    <div class="dynamic-content-2">
      Lorum ipsum
    </div>
  </div>
    
  <div class="item">
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>
    
  <div class="item">
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>
    
  <div class="item">
    <div class="dynamic-content-2">
      Lorum ipsum
    </div>
  </div>
    
  <div class="item">
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>
    
  <div class="item">
    <div class="dynamic-content-3">
      Lorum ipsum
    </div>
  </div>
    
  <div class="item">
    <div class="dynamic-content-2">
      Lorum ipsum
    </div>
  </div>
    
  <div class="item item_with-icon">
    <div class="icon"></div>
    <div class="dynamic-content-1">
      Lorum ipsum
    </div>
  </div>
</div>

同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇
同侧阴唇

更新

我需要一个解决方案，将块拉伸到整行高度。如果有人需要如图所示的简单对齐，请参见

---

我想我明白了：在没有顶部（“固定高度”）框的行中，应该删除顶部填充（如图像中所示）。当行中没有顶框时，应该没有间隙

我不相信单凭CSS就可以做到这一点。由于元素是动态包装的，因此每行的项目数会有所不同。CSS无法在此场景中以元素为目标，因为在HTML/CSS中

---

您需要一个JavaScript解决方案。

网格和flexbox两者都有可能，当然HTML结构有很大的不同。@VXp，那么它是如何实现的呢？与其问“如何实现”，不如先自己尝试一下，然后在您遇到问题时向我们提供代码，也许我们可以提供帮助。因此，这不是一个代码编写服务。问题还不清楚。你的代码到底出了什么问题？为什么不起作用？@Michael_B问题是，行中没有带图标的元素，但其顶部有填充。它应该与图片第二行上的相同。