Views infinite scroll breaks grid layout

When using views infinite scroll, one thing I have noticed is it breaks any responsive grid layout. This is in part due to the way it injects another container element.

so typically we have the following views markup in views-view.html.twig

  {% if rows %}
    <div class="view-content">
      {{ rows }}
    </div>
  {% elseif empty %}
    <div class="view-empty">
      {{ empty }}
    </div>
  {% endif %}

The contents of rows outputs each row

e.g.

{% if title %}
  <h3>{{ title }}</h3>
{% endif %}
{% for row in rows %}
  {%
    set row_classes = [
      default_row_class ? 'views-row',
    ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>
    {{ row.content }}
  </div>
{% endfor %}

Therefore we can assign a width to each item using a grid column class e.g. col-md-4

There is no way to add a class to view-content though, so we have to hard code this in the template. Adding row class is therefore required in the template, which is used for all views including view-views-unformatted and others.

Rather than using this element, views infinite scroll wraps the element in an additional wrapper. While this works, it also breaks any row gird layout previous applied to view-content. If we add .row class again, this results in incorrect width of grid elements as row class is being applied twice.