Loop using while, better solution?

I’m building a page with two colums : one and two.
I would like to populate these columns with a limit of 2 items in the first column so the remaining item will fallback to the second column.

I’m trying to avoid being too complicated here and I’m looking for a nice way to do it. Or having the same code for column one and two duplicated…
I first tested with a while.

<div class="one">

    <?php foreach ($site->pages()->limit(2) as $item) : ?>
        <li style="color: blue" id="<?= $item->title() ?> "><?= $item->title() ?></li>
    <?php endforeach; ?>

<div class="two">

    <?php foreach ($site->pages() as $item) : ?>
        <li style="color: blue" id="<?= $item->title() ?> "><?= $item->title() ?></li>
    <?php endforeach; ?>


I thought about something like an e() condition to switch the class to two but this won’t work until I loop through it.

It’s some kind of logic I haven’t found yet.

It depends what your frontend looks like. I’m already confused as to why you have <li> inside a <div> for example.

There are CSS only soutions to this kind of problems but it all comes down to the design and how it needs to scale across devices

Well, the div with li inside was a little confusion while trying to make this code an example.

I tried to manage that using css grid too, since it can do it, but not really the way I want it.
The best solution I have found is to get a first ul for one and another for two.

What I would like to avoid is a redundance. (Exactly what the example is showing)

$chunks = [
  'one' => $site->pages()->limit(2);
  'two' => $site->pages()->offset(2);

foreach ($chunks as $key => $items): ?>

<ul class="<?= $key ?>">
      <?php foreach ($items as $item) : ?>
              <li style="color: blue" id="<?= $item->title() ?> "><?= $item->title() ?></li>
       <?php endforeach; ?>
<?php endforeach; ?>
1 Like

that’s it.
I fixed the array though:

$offset = "2";
$chunks = array(
    'one' => $site->pages()->limit($offset),
    'two' => $site->pages()->offset($offset),