PHP foreach loop with w3 responsive grid

Question

Is there a way to create multiple rows of thirds using w3.css and a foreach loop also to populate the thirds with data from a sample database?

Tried using but this would create multiple thirds in a single row instead:

<?php foreach ($products as $index => $product) :?>

    <div class="w3-row">
<?php foreach ($products as $index => $product) : ?>
      <div class="w3-third w3-container">
        <h2>product 1 </h2>
      </div>
    </div>
    <?php endforeach; ?>
</div>
<?php endforeach; ?>

Expected output:

<div class="w3-row">
  <div class="w3-third w3-container">
    <h2>Item 1 from a database</h2>
  </div>
  <div class="w3-third w3-container">
    <h2>Item 2 from a database</h2>
  </div>
  <div class="w3-third w3-container">
    <h2>Item 3 from a database</h2>
  </div>
</div>

<div class="w3-row">
      <div class="w3-third w3-container">
        <h2>Item 4 from a database</h2>
      </div>
      <div class="w3-third w3-container">
        <h2>Item 5 from a database</h2>
      </div>
      <div class="w3-third w3-container">
        <h2>Item 6 from a database</h2>
      </div>
    </div>

Thanks ive updated the post, not sure if its clear enough for what I'm trying to achieve — Terence Chew
– Terence Chew, Commented Nov 29, 2021 at 18:15

bro · Accepted Answer · 2021-11-29 20:01:34Z

1

so you want to get a row for every third element of the loop. You can achieve this by checking how many of them should be in a row with modulo.

<?php foreach ($products as $index => $product): $aThird = ($index+1%3)===0; ?>
    <?php if ($aThird): ?>
        <div class="w3-row">
    <?php endif ?>
      <div class="w3-third w3-container">
        <h2>product 1 </h2>
      </div>
    <?php if ($aThird): ?>
        </div>
    <?php endif ?>
</div>
<?php endforeach; ?>

But my I would strongly suggest to look at grid layout https://css-tricks.com/snippets/css/complete-guide-grid/

answered Nov 29, 2021 at 20:01

bro

616 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amirreza Noori Over a year ago

For true work it's better to change $aThird = ($index+1%3)===0; to $aThird = ($index % 3) == 0;. because array indexes start from zero and you need to add <div class="w3-row"> for first w3-third.

virtualize · Accepted Answer · 2021-11-30 09:44:32Z

0

You can use array_chunk() function. It splits an array into chunks of new arrays

$myArray = ['Item-1', 'Item-2', 'Item-3', 'Item-4', 'Item-5', 'Item-6'];

$myArray = array_chunk($myArray, 3);

foreach($myArray as $Array){

     echo '<div class="w3-row">';
     
     foreach($Array as $Value){
          echo '<div class="w3-third w3-container">'.$Value.'</div>';
     }

     echo '</div>';

}

edited Nov 30, 2021 at 9:44

virtualize

2,6072 gold badges27 silver badges37 bronze badges

answered Nov 29, 2021 at 21:08

abhiseka

11 silver badge

Collectives™ on Stack Overflow

PHP foreach loop with w3 responsive grid

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related