How to create a foreach that doesn include whites space between the looped elements?

Question

I have a foreach which outputs div elements, like this:

<!-- ko foreach: names -->
  <div class="grid__item">
      <p data-bind="text: $index"></p>
  </div>
<!-- /ko -->

function AppViewModel() {
    var self = this;

    self.names = ko.observableArray([
        { name: 'Woop' },
        { name: 'Dee' },
        { name: 'Doo' }
    ]);

}

app = new AppViewModel(); 
ko.applyBindings(app);

This results in the DOM in:

<div class="grid__item">
  <p>0</p>
</div>
<div class="grid__item">
  <p>1</p>
</div>
<div class="grid__item">
  <p>2</p>
</div>

However, I need to have no white spaces between the div elements, i.e. I want it to render like this:

<div class="grid__item">
  <p>0</p>
</div><div class="grid__item">
  <p>1</p>
</div><div class="grid__item">
  <p>2</p>
</div>

Answer 1

Should be simple enough, just remove the whitespace in your comment block:

function AppViewModel() {
    var self = this;

    self.names = ko.observableArray([
        { name: 'Woop' },
        { name: 'Dee' },
        { name: 'Doo' }
    ]);
}

app = new AppViewModel(); 
ko.applyBindings(app);

div { border: 1px solid red; display: inline-block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<!-- ko foreach: names --><div class="grid__item">
  <p data-bind="text: $index"></p>
</div><!-- /ko -->

However, this feels awkward. So I'll repeat my comment here: Honest question, just to check, this is not by any chance an instance of the XY-problem, where X is in fact "getting gaps between divs"?