Responsive list layout with padding from elements without fixed element inside

Question

I have a list of dynamic items, some of them may have an icon on top of it, some of them not. I need padding from top inside elements that don't have the icon and located in row where an element have the icon. Width of items is fixed, and icon height is fixed too. So the "grid" may contain different columns count depending on screen width. Something like this: Is it possible to make such kind of layouts? How to do it?

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

Update

I need a solution where the blocks are stretched to the full row height. In case somebody need simple alignment as on the picture see the Codepen

Possible with both, the grid and flexbox, of course with major differences in HTML structure. — VXp, Apr 20 '18 at 17:22
Instead of asking "how can it be done", you should attempt this on your own first, then when you have trouble provide us with your code and maybe we can help. SO is not a code-writing service. — chazsolo, Apr 21 '18 at 02:06
The problem is unclear. What exactly is wrong with the code you have? Why isn't it working? — Michael Benjamin, Apr 23 '18 at 00:55
@Michael_B the problem is that row, where no element with icon, have padding on top. It should be the same as on picture's second row. — Lyubimov Roman, Apr 23 '18 at 04:17

Michael Benjamin · Answer 1 · 2018-04-23T17:56:06.883

I think I understand: On rows where there are no top ("fixed height") boxes, the top padding should be removed (like in your image). There should be no gap when there is no top box in the row.

I don't believe this can be done with CSS alone. Since your elements wrap dynamically, the number of items per row will vary. CSS can't target elements in this scenario because in HTML/CSS parent containers don't know when child elements wrap.

You'll need a JavaScript solution.

Responsive list layout with padding from elements without fixed element inside

1 Answers1