appcropolois
  •  Templates
  • Builder
    •  Product Tour
    •  Sign up
    •  Dashboard
  •  Learn
  •  Discover
  •  Upgrade
  •  Sign in
  •  My Profile
    • View Orders
    • Edit Profile
    • Sign Out
  •  Cart
    ➜ 
  1. Home
  2. Learn
  3. Distributing 2 items per row
Share

Distributing 2 items per row

This example shows how to iterate through a collection of items, and distribute them amongst rows that contain a fixed number of items. E.g. distributing 2 items per row.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{$count = 0}
{foreach $posts.data as $post}
{$count = $count + 1}
    {if $count%2 == 1} {* use $count%n to add more items per row *}
    <!-- post Row -->
    <div class="row post_row">
    {/if}
    
        <!-- post -->
        <div class="col-sm-4">
            <div class="post">
                <div class="img">
                    <a href="{$post.post_permalink}">
                        <img src="{$post.post_thumbnail}" alt="{$post.post_title} - {$company.name}" class="img-responsive" />
                    </a>
                </div>
                <div class="text">
                    <h5><a href="{$post.post_permalink}">{$post.post_title} {$count}</a></h5>
                    <span class="date">Wed, 12 Dec.</span>
                    {$post.post_excerpt}
                </div>
                <div class="author_box">
                    <h6>Alejandra Galvan</h6>
                    <p>Creative Director</p>
                </div>
                <!--
                <a class="plus_wrapper" href="blogpost.html">
                    <span>&#43;</span>
                </a>
                -->
            </div>
        </div><!-- /post -->
    
    {if $count%3 == 0 || $post@last == 1}
    </div><!-- /post row-->
    {/if}
{/foreach}
{$count = 0}
{foreach $posts.data as $post}
{$count = $count + 1}
    {if $count%2 == 1} {* use $count%n to add more items per row *}
    <!-- post Row -->
    <div class="row post_row">
    {/if}
    
        <!-- post -->
        <div class="col-sm-4">
            <div class="post">
                <div class="img">
                    <a href="{$post.post_permalink}">
                        <img src="{$post.post_thumbnail}" alt="{$post.post_title} - {$company.name}" class="img-responsive" />
                    </a>
                </div>
                <div class="text">
                    <h5><a href="{$post.post_permalink}">{$post.post_title} {$count}</a></h5>
                    <span class="date">Wed, 12 Dec.</span>
                    {$post.post_excerpt}
                </div>
                <div class="author_box">
                    <h6>Alejandra Galvan</h6>
                    <p>Creative Director</p>
                </div>
                <!--
                <a class="plus_wrapper" href="blogpost.html">
                    <span>&#43;</span>
                </a>
                -->
            </div>
        </div><!-- /post -->
    
    {if $count%3 == 0 || $post@last == 1}
    </div><!-- /post row-->
    {/if}
{/foreach}

You can also add 1 to the index as you are iterating and calculate the module of the number of items that you would like to have in a single row.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{foreach $posts.data as $post}
    {meta post_id="{$post.ID}" assign_to="meta"}
    {if ($post@index+1)%3 == 1}
    <!-- post Row -->
    <div class="row post_row">
    {/if}
    
        <!-- post -->
        <div class="col-sm-4">
            <div class="post">
                <div class="img">
                    <a href="{$post.post_permalink}">
                        <img src="{$post.post_thumbnail}" alt="{$post.post_title} - {$company.name}" class="img-responsive" />
                    </a>
                </div>
                <div class="text">
                    <h5><a href="{$post.post_permalink}">{$post.post_title}</a></h5>
                    <span class="date">Wed, 12 Dec.</span>
                    {$post.post_excerpt}
                </div>
                <div class="author_box">
                    <h6>Alejandra Galvan</h6>
                    <p>Creative Director</p>
                </div>
            </div>
        </div><!-- /post -->
    
    {if ($post@index+1)%3 == 0 || $post@last == 1}
    </div><!-- /post row-->
    {/if}
{/foreach}
{foreach $posts.data as $post}
    {meta post_id="{$post.ID}" assign_to="meta"}
    {if ($post@index+1)%3 == 1}
    <!-- post Row -->
    <div class="row post_row">
    {/if}
    
        <!-- post -->
        <div class="col-sm-4">
            <div class="post">
                <div class="img">
                    <a href="{$post.post_permalink}">
                        <img src="{$post.post_thumbnail}" alt="{$post.post_title} - {$company.name}" class="img-responsive" />
                    </a>
                </div>
                <div class="text">
                    <h5><a href="{$post.post_permalink}">{$post.post_title}</a></h5>
                    <span class="date">Wed, 12 Dec.</span>
                    {$post.post_excerpt}
                </div>
                <div class="author_box">
                    <h6>Alejandra Galvan</h6>
                    <p>Creative Director</p>
                </div>
            </div>
        </div><!-- /post -->
    
    {if ($post@index+1)%3 == 0 || $post@last == 1}
    </div><!-- /post row-->
    {/if}
{/foreach}

By:
Category: Frameworks
Posted on: Saturday, May 9, 2015

Sign in to post your comment


Not registered? Create an Account.

Lost your password? Click here to recover.

Building Apps?

Create, customize, and publish mobile web applications using the Appcropolis Mobile Builder.

Get Started
Browse Categories
  • Books (0)
  • CSS3 (2)
  • Design (0)
  • Frameworks (10)
  • How-To (6)
  • HTML5 (2)
  • jQuery Mobile (7)
  • Miscelaneous (1862)
  • Mobile Builder (1)
  • News (9)
  • Opinion (1)
  • User Experience (0)
  • Web Technology (11)
  • Webclips (4)

Ready-to-use Templates

Check out Appcropolis Mobile Templates

We offer 1,000's of mobile templates that are fully designed, coded, and ready to use. Learn more.

Download Free Templates

Contact Us

Your feedback means the world to us.
Contact us if you have any questions or
any feature requests:

Saint Louis, MO 63101
911 Washington Ave
Email: info@appcropolis.com

Appcropolis

  •   About Us
  •   Blog
  •   Discover
  •   Templates
  •   Contact Us

Get Free Templates

Subscribe to our newsletter to receive
notification about new templates, prodcut updates,
and technical articles.


© 2025 Appcropolis, LLC · All Rights Reserved
Sitemap  ·  Terms Of Service  ·  Privacy