HTML Templating – Output a Grid in a Single Loop

It was about a two years ago. I was working on a food startup and needed to display some food photos in a six-column grid. The image below shows what the end result looked like: I was using Bootstrap, which requires an HTML element to be wrapped around each column and each row. Here’s a sample of Bootstrap showing two rows of four columns each: <!-- 2 row - 4 column grid --> <div class="row"> <div class="col-md-3">Item 1</div> <div class="col-md-3">Item 2</div> <div class="col-md-3">Item 3</div> <div class="col-md-3">Item 4</div> </div> <div class="row"> <div class="col-md-3">Item 5</div> <div class="col-md-3">Item 6</div> <div class="col-md-3">Item 7</div> <div class="col-md-3">Item 8</div> </div> My first attempt at a solution involved putting the items in a 2D grid and using nested loops in the HTML template.