响应列表布局，其中填充来自没有固定元素的元素

Question

我有一个动态项目的列表，其中一些可能在上面有一个图标，有些则没有。我需要从顶部没有图标的元素填充，并位于一个元素有图标的行中。项目的宽度是固定的，图标高度也是固定的。因此，“网格”可能包含不同的列计数取决于屏幕宽度。就像这样：

这样的布局有可能吗？该怎么做呢？

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

更新

我需要一个解决方案，把积木伸展到整排高度。如果有人需要简单的对齐，如图中所示，请参阅科德芬

Answer 1

我想我理解:在没有顶部(“固定高度”)框的行上，顶部填充应该被移除(就像在您的图像中)。当行中没有顶部框时，不应该有空隙。

我不相信单靠CSS就能做到这一点。由于您的元素动态包装，每一行的项数将有所不同。在这个场景中，CSS不能以元素为目标，因为在父容器不知道子元素何时换行 /CSS中。

您需要一个JavaScript解决方案。