Create rows in Foundation automatically

[remove]

I switched from Bootstrap to Foundation and like it a lot. It mainly got my interest because PW forum members speaks so highly of Foundation. I need some help with the following code because foundation is rendering columns differently than Bootstrap.  

The following code creates rows with three columns automatically from children of pages. I use it to make portfolios, galleries or something like that. This code works perfect.

<?php
	$columns = $page->children;
	$i = 1;
	echo '<div class="row">';
	foreach ($columns as $column) {
	echo "<div class='medium-4 columns'>
		<a href='{$column->url}'>$column->title</a>";

	if($i % 3 == 0) {echo '</div></div><div class="row">';}	

	else {echo '</div>';}	

	$i++;
	}
	echo '</div>';
?>

Foundation has a way to handle and correct incomplete rows/columns with an "end" class. So in my case I use a three column lay-out. If there are only five children my row is incomplete. In order to render completely, the last child should get a class "end", as described in the docs of foundation about incomplete rows.

When I change this line and add the "end" class it renders fine, but than every column gets an "end" class of course.   

echo "<div class='medium-4 columns end'>

How can I add the class "end" to only the last child (last column)?

[DaveP]

This should work...

<?php
	$columns = $page->children;
        $colcount = $columns->count();
	$i = 1;
	echo '<div class="row">';
	foreach ($columns as $column) {
	    if($i == $colcount){
                 echo "<div class='medium-4 columns end'>
		     <a href='{$column->url}'>$column->title</a>";       
            } else {
                 echo "<div class='medium-4 columns'>
		     <a href='{$column->url}'>$column->title</a>";
            };
	if($i % 3 == 0) {echo '</div></div><div class="row">';}	

	else {echo '</div>';}	

	$i++;
	}
	echo '</div>';
?>

I have some very similar code to yours in a site currently under development, even including a slight variation on the modulo magic, but I was lazy and applied the 'end' class to every column. 

[remove]

@DaveP: Thx, this code works perfect and will come in very handy!

About the code: What does this line do? I doesn't make any sense to me.

if($i == $colcount){ 

I also found a different approach that renders the same result. I did not test it thoroughly but it looks very PW friendly. Foundation has build in a Block grid. You can split up content of a list evenly. The code becomes more simple. I believe it works with building blocks with css style float:left;width:33%.

<div class="row">
	<?php
		$blocks = $page->children;
		echo '<ul class="medium-block-grid-3">';
		foreach ($blocks as $block) {
			
			echo "<li><a href='{$block->url}'>$block->title</a></li>";
		}
		echo '</ul>';
	?>
</div>

[adrian]

That line is checking to see what iteration of the loop you are in. $i is set to 1 before the start of the foreach loop. At the end of each loop, 1 is added to the current value of $i with the $i++; line. So by getting the number of children of the page and setting $colcount to that value and then checking whether $i is equal to the number of required columns you are checking whether to add the "end" class or not.

Hope that makes sense.

[bernhard]

these are the postings where i am happy using pocketgrid. the resulting code for your template is quite simple, even though you have to define some css rules first, but you don't have to take care of inserting </div><div class="row"> every 3rd item and doing modulo %3 == 0 and $i++ things and all that and keep your template really clear!

<div class="block-group">
	<?php foreach ($page->locations as $loc) { ?>
		<div class="col3 block">
			<h3><?= $loc->title ?></h3>
			<p><?= nl2br($loc->adresse) ?></p>
			<p><small><a href="<?= $loc->website ?>" target="_blank"><?= $loc->website ?></a></small></p>
		</div>
	<?php } ?>
</div>

you can define custom breakpoints for your class "col3" (eg. 3 cols from 1000px+, 2 cols from 500px+ and 1 col below 500px screen resolution) and it already takes care of correct floating: http://arnaudleray.github.io/pocketgrid/docs/#automatic-rows-in-real-life

it seems that your mentioned block grid approach is quite similar - so i'm kind of happy reading about that

[remove]

@ BernardB: In some cases adding a row works for the best. You can call it a row in Bootstrap and Foundation or block-group in Pocketgrid. It all comes down to the same. I have been using Pocketgrid in the past but it didn't work for me. I actually got more and more respect for the big and proffesional css frameworks in there efforts to make websites compatible with all different kinds of devices and browsers.

Coming from Bootstrap, Foundation brings me new powerful tools like Blog Grid and Interchange. You can use Custom download to reduce file size to a bare minimun.

[bernhard]

@ BernardB: In some cases adding a row works for the best. You can call it a row in Bootstrap and Foundation or block-group in Pocketgrid. It all comes down to the same.

i think pocketgrid is quite different to them, because you do NOT need to wrap rows into surrounding divs

markup is

<div class="block-group">
  <div class="col3 block">block 1</div>
  <div class="col3 block">block 2</div>
  <div class="col3 block">block 3</div>
  <div class="col3 block">block 4</div>
  <div class="col3 block">block 5</div>
  <div class="col3 block">block 6</div>
  <div class="col3 block">block 7</div>
  <div class="col3 block">block 8</div>
  <div class="col3 block">block 9</div>
  <div class="col3 block">block 10</div>
</div>

// and NOT this
<div class="block-group">
  <div class="col3 block">block 1</div>
  <div class="col3 block">block 2</div>
  <div class="col3 block">block 3</div>
</div>
<div class="block-group">
  <div class="col3 block">block 4</div>
  <div class="col3 block">block 5</div>
  <div class="col3 block">block 6</div>
</div>
<div class="block-group">
  <div class="col3 block">block 7</div>
  <div class="col3 block">block 8</div>
  <div class="col3 block">block 9</div>
</div>
<div class="block-group">
  <div class="col3 block">block 10</div>
</div>

and the result would be

block 1  | block 2 | block 3
block 4  | block 5 | block 6
block 7  | block 8 | block 9
block 10 |

but it could also be

block 1  | block 2
block 3  | block 4
block 5  | block 6
block 7  | block 8
block 9  | block 10

depending on your css rules for "col3". i use it together with other frameworks for displaying responsive "tables", so the output is this

// desktop
block 1  | block 2 | block 3

// tablet
block 1 | block2
block 3

// mobile
block 1
block 2
block 3

i wouldn't know how to achieve this with bootstrap or foundation?

 I have been using Pocketgrid in the past but it didn't work for me.

what didn't work for you? note that i don't want to convince you using pocketgrid, but i would be interested to know about problems i might get with it. i hope it's not offtopic...

[remove]

@ Bernhardb: It is off topic but good to hear PG is working for you.