CSS Grid Not Displaying Correctly

Kirby 3 Questions 🤔
#1

Hi,

I wondered if anyone would be able to help me out? I’m using the grid block plugin on a local installation with the Merx starter kit but I can’t get the columns to show correctly on the frontend. I have a two column layout but my block is displaying like this:

Screenshot 2022-07-24 at 13.59.22
Screenshot 2022-07-24 at 13.59.221033×188 30 KB

This is the code I’m using in the section:

    <?php foreach ($page->blocks()->toBlocks() as $grid): ?>
        <?= $grid ?>
    <?php endforeach ?>

I believe the HTML page is rendering correctly:

<section class="grid" id="3c9fd001-4f91-4f25-aa27-5b5e5c6b75e3">
<div class="column" style="--span:6">
<div class="blocks">
<h2>Better for the planet</h2>
</div>
</div>
<div class="column" style="--span:6">
<div class="blocks">
<div class="text">
<p>Clean for the planet</p><p>Simple to use</p><p></p></div>

</div>
</div>
</section>

Thanks in advance :slight_smile:

#2

As far as I can see, the Merx Starterkit uses their own grid definitions. So if you use a column class and --span CSS variable which are not defined in the CSS, you either need to fix the styles or adapt the HMTL of the block snippet. The plugin doesn’t come with a any frontend styles.

#3

Thanks for getting back to me. I’ve tried creating a separate classes for the column and grid that the plugin uses but the column span never gets applied. If I toggle the element CSS variable --span off then on in chrome developer the columns display correctly. It must be something to do with the CSS variables and when they’re declared. I’m not really sure what I can do to get it to display correctly.

#4

As I said, if you want to use the Merx Starterkit, then it would be best to adapt the block snippet accordingly. The HTML of the block snippet is just a usage example, not something you have to stick with.

Actually, also the Merx Starterkit is just a showcase for the Merx plugin not a full fledged theme. In most cases, you would want to create your own templates and styles.

Are you new to HTML/CSS?

#5

Righto! I think I’ve got something working now :slight_smile:

I guess I’m kinda new to it, I know the basics and enough to get by.

As you suggested, I’ve adapted the block snippet and used a PHP case statement to convert the grid to a data attribute so it works with the Merx implementation:

<?php /** @var \Kirby\Cms\Block $block */ ?>
<?php foreach ($block->grid()->toLayouts() as $layout): ?>
  <section class="grid" id="<?= $layout->id() ?>">
    <?php foreach ($layout->columns() as $column): ?>
      <?php $span = ''; switch ($column->span()) {
        case "12":
          $span = "12/12";
          break;
        case "6":
          $span = "1/2";
          break;
        case "4":
          $span = "1/4";
          break;
      } ?>
      <div data-width="<?php echo $span ?>">
        <div class="blocks">
          <?= $column->blocks() ?>
        </div>
      </div>
    <?php endforeach ?>
  </section>
<?php endforeach ?>

Thanks for your help!