Layout loop to achieve a custom grid

The CMS Questions
1

I’m using layouts to achieve a custom grid based on the layout chosen within Kirby. The desired output to page is:

<section class="p_bg--blue">
  <div class="p_container">

    <div class="autogrid columns--3"><!-- Columns number set using kirby span -->
        <div class="column">
              <h2>Column 1</h2>
          </div>
        <div class="column">
              <h2>Column 2</h2>
          </div>
        <div class="column">
              <h2>Column 3</h2>
          </div>
    </div>

  </div>
</section>

I need .autogrid div to wrap around all column divs and not repeated. I can only get the following output, which is not as needed above:

<section class="p_bg--blue">
  <div class="p_container">

    <div class="autogrid columns--3">
        <div class="column">
              <h2>Column 1</h2>
          </div>
    </div>
    <div class="autogrid columns--3">
        <div class="column">
              <h2>Column 2</h2>
          </div>
    </div>
    <div class="autogrid columns--3">
        <div class="column">
              <h2>Column 3</h2>
          </div>
    </div>

  </div>
</section>

Here’s my loop code:

<?php foreach ($page->sections()->toLayouts() as $layout): ?>

<section class="p_<?= $layout->colour() ?>" id="<?= $layout->id() ?>">
    <div class="p_container">

  <?php foreach ($layout->columns() as $column): ?>
      <div class="autogrid columns--<?= esc($column->span(), 'css') ?>">

        <?php foreach ($column->blocks() as $block): ?>
        <div class="column">
          <?= $block ?>
        </div>
        <?php endforeach ?>

      </div>
  <?php endforeach ?>
    </div>
</section>

<?php endforeach ?>

Hope someone can help please?

2

needs to go out of the second loop

3

I tried that but then the page won’t load as kirby shows a error page:

This page is currently offline due to an unexpected error. We are very sorry for the inconvenience and will fix it as soon as possible.

No error if I remove:

<?= esc($column->span(), 'css') ?>

But I need that to determine the amount of columns.

<?php foreach ($page->sections()->toLayouts() as $layout): ?>

<section class="p_<?= $layout->colour() ?>" id="<?= $layout->id() ?>">
    <div class="p_container">
      <div class="autogrid columns--<?= esc($column->span(), 'css') ?>">

  <?php foreach ($layout->columns() as $column): ?>

        <?php foreach ($column->blocks() as $block): ?>
        <div class="column">
          <?= $block ?>
        </div>
        <?php endforeach ?>

  <?php endforeach ?>
      </div>
    </div>
</section>

<?php endforeach ?>
4

Because of this, you can count the columns instead of getting the column span.

For the amount of columns, you can use $layout->columns()->count(), but this is different from $column->span().

5

Thank you! that worked and I could simplify by removing additional div. The more I use Kirby the better it gets!

Final code for individual blocks as columns:

<?php foreach ($page->sections()->toLayouts() as $layout): ?>

<section class="p_bg--<?= $layout->colour() ?>" id="<?= $layout->id() ?>">
    <div class="p_container p_autogrid p_columns--<?= esc($layout->columns()->count(), 'css') ?>">

  <?php foreach ($layout->columns() as $column): ?>

        <?php foreach ($column->blocks() as $block): ?>
        <div class="p_column">
          <?= $block ?>
        </div>
        <?php endforeach ?>

  <?php endforeach ?>
      </div>
</section>

<?php endforeach ?>

or all blocks per column

<?php foreach ($page->sections()->toLayouts() as $layout): ?>

<section class="p_bg--<?= $layout->colour() ?>" id="<?= $layout->id() ?>">
  <div class="p_container p_autogrid p_columns--<?= esc($layout->columns()->count(), 'css') ?>">

  <?php foreach ($layout->columns() as $column): ?>
    <div class="p_column">
      <?= $column->blocks() ?>
    </div>
  <?php endforeach ?>
  </div>
</section>

<?php endforeach ?>

css code:

/*
  AUTO GRID
  Set the minimum column size with `minmax(var(--min)` gives you
  a fully responsive grid with no media queries. Largest screen base column widths:
*/

@media (min-width: 768px) {
  .p_columns--4 {
    --min: 18rem;
  }
  .p_columns--3 {
    --min: 25rem;
  }
  .p_columns--2 {
    --min: 30rem;
  }
}

.p_autogrid {
  --gutter: 1rem;
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
  grid-auto-flow: dense;
}