New Row Every 3 Items

Create new row after 3 item iterations with VueJS and Skeleton CSS

You could do something like this; Use Math.ceil(items.length / 3) to calculate the number of rows needed to hold the items, loop through rows, for each row loop through items for that row, i.e. items.slice(3 * (rowIdx - 1), 3 * rowIdx).

<div class="row" v-for="rowIdx in Math.ceil(items.length / 3)">
    <div class="one-third column" v-for="item in items.slice(3 * (rowIdx - 1), 3 * rowIdx)">
        <custom-component :item="item"></custom-component>
    </div>
</div>

Add a new row after every 3 columns are created

Here is the code snippet of liquid code, that add and close the div after 3 items loop, you can check and enhance the logic according to your needs

{% assign defaultSize = 3 %} // this the items after div is closed
{% assign counter = 1 %}
{% assign count = 1 %}
{% for i in (1..10) %}
    {% assign nextItem = count | minus:1 %}
    {% assign nextItem = defaultSize | times:nextItem %}
    {% assign nextItem = nextItem | plus:1 %}
    {% if counter == 1 or counter == nextItem %}<div class="row">{% endif %}
        <div class="cls-{{forloop.index}}">{{forloop.index}}---{{counter}}</div>
    {% assign lastItem = defaultSize | times:count %}
    {% if counter == lastItem or forloop.last == true %}
        </div>
        {% assign count = count | plus: 1 %}
    {% endif %}
    {% assign counter = counter | plus: 1 %}
{% endfor %}

Here is the output of the following snippets on my development store:

Sample Image

Create new row for every 3 items Vue.js

Remove the chunk and use :span="8" instead.

<template>
  <div class="home">
    <el-container>
      <el-row>
        <el-col :span="8" v-for="item of stories" :key="item.id">
          <el-card>
            <div>{{ item.title }}</div>
            <div>{{ item.text }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-container>
  </div>
</template>

computed: {
},

Create a new row every three columns

You are using props incorrectly.

<Container fluid>
  <Row>
    <Col xs={6} md={4} lg={3}></Col>
  </Row>
</Container>

New row every 3 items

Besides the aforementioned each_slice, Rails also has an in_groups_of method that you can use like so:

<% @items.in_groups_of(3, false).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

Pretty much the same as each_slice, except the scenario of needing to output blank divs becomes much cleaner like so:

<% @items.in_groups_of(3).each do |group| %>
  <div class="row">
    <div class="three columns">
      <% group.each do |item| %>
        <div class="item">
          <%= item.content if item %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

in_groups_of pads missing items in the last group with nil by default, so it will make the last few iterations and the if item check will make sure it doesn't blow up by calling content on nil.

in_groups is another fun one to use for view formatting.

create new row after every 3 column in loop

The code to print row should be inside foreach loop in a specific condition. And the condition for printing row should be as:

<?php
foreach ($location_list as $key => $location) {
    if ($key % 3 == 0) {
        echo '<div class = "row">';
    }

    echo "<div class ='col-md-4'>
          <hr> $location->address </hr>
           <hr> $location->name </hr>
           <hr> $location->pin </hr>
       </div> ";

    if ($key % 3 == 2) {
        echo '</div>';
    }
}
?>

Javascript every nth, create new row

First of all, no need to handle a count variable on your own, the .each() function already supplies an index element (as an optional argument).

With the modulus operator you can get the remainder from dividing the index by 3. Then you can tell when do you need to print the opening of the row and the ending of it.

$(data).find('products').each(function(index) {

    itemName = $(this).find('itemName').text();
    itemDesc = $(this).find('itemDesc').text();
    itemID = $(this).find('id').text();

        if ((index % 3) == 0) items += '<div class="row-fluid">';

        items += '<div class="span3">Col 1</div>';

        if ((index % 3) == 2) items += '</div>';
});

if (items.substr(-12) != '</div></div>') items += '</div>';

How to add Row after every 3 columns in angular

If you split your Array into subarrays with always 3 titel's then you can easy loop through this Array in your template.

https://ng-run.com/edit/zZsztdvTOTpzbUC5Buuj?open=app%2Fapp.component.ts

component html

<div class="row" *ngFor="let row of newTitleArr; let i = index">
    <div class="col" *ngFor="let col of newTitleArr[i]">{{ col.title }}</div>
</div>

component ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  titleArr = [
    { title: 'title1' },
    { title: 'title2' },
    { title: 'title3' },
    { title: 'title4' },
    { title: 'title5' },
    { title: 'title6' },
    { title: 'title7' },
    { title: 'title8' },
    { title: 'title9' },
    { title: 'title10' },
    { title: 'title11' },
    { title: 'title12' },
    { title: 'title13' },
  ];

  newTitleArr:any[];

  ngOnInit() {
     this.newTitleArr = this.splitArr(this.titleArr, 3)
  }

  splitArr(arr, size) {
     let newArr = [];
     for(let i = 0; i< arr.length; i += size) {
       newArr.push(arr.slice(i, i+size));
     }
     return newArr;
  }
}

Jinja2: Create new row for every 3 items

The best way to do this is to use the built in batch filter to break up your list into groups of three:

{% for article_row in articles | batch(3, ' ') %}
<div class="row">
    {% for article in article_row %}
    <div class="span4">{{ article }}</div>
    {% endfor %}
</div>
{% endfor %}