Combining cube-boilerplate fluid grid with Kirby’s flexible column layout

The CMS Questions
,
1

Hi !

I’d like to implement the cube-boilerplate grid (from Andy Bell / Piccalilli) into Kirby’s layout system. This grid enables a fluid, media-query-free layout by “giving elements sensible boundaries and allowing them to auto-flow or resize wherever possible.”

cube-boilerplate/src/css/compositions/grid.css at main · Set-Creative-Studio/cube-boilerplate · GitHub :

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space between each item.
--grid-min-item-size (14rem): How large each item should be ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill to change how empty grid tracks are handled
*/

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-s-l));
}

/* A split 50/50 layout */
.grid[data-layout='halves'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}

/* Three column grid layout */
.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

and also :

/*  REGION UTILITY
Consistent block padding for page sections
*/
.region {
  padding-block: var(--region-space, var(--space-xl-2xl));
}
/*
WRAPPER COMPOSITION 
A common wrapper/container
*/
.wrapper {
  margin-inline: auto;
  max-width: clamp(16rem, var(--wrapper-max-width, 100vw), 80rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

Here is my layout.php snippet :

<?php foreach ($page->modules()->toLayouts() as $layout): ?>
  <?php
  $column_count = $layout->columns()->count();
  $layout_type = match ($column_count) {
    1 => 'single',
    2 => 'halves',
    3 => 'thirds',
    default => 'auto'
  };
  ?>
  <div class="region">
    <div class="wrapper">
      <div class="grid" data-layout="<?= $layout_type ?>" id="<?= esc($layout->id(), 'attr') ?>">
        <?php foreach ($layout->columns() as $column): ?>
          <div class="column">
            <div class="text">
              <?= $column->blocks() ?>
            </div>
          </div>
        <?php endforeach ?>
      </div>
    </div>
  </div>
<?php endforeach ?>

The min and max values in –grid-min-item-size : clamp(16rem, 50vw, 33rem) could even be set via the Panel to allow precise control of column behavior.

:right_arrow: However, the downside is that it doesn’t support grids with rows that have a varying number of columns (like : “1/2, 1/2, 1/1") which is possible with the Starterkit grid using:

<div class="column" style="--columns:<?= esc($column->span(), 'css') ?>">

.grid > .column {grid-column: span var(--columns);}

I wonder how to get the best of both worlds.

  1. A really basic workaround I can think of is modifying the padding-block of .region to remove spacing between regions, allowing us to stack a X-column grid above a Y-column grid — but this feels unsatisfactory.

  2. Otherwise, a solution could be to allow multiple .grid blocks within the same .wrapper or .region, to get something like this (for example) :

<div class="region">
   <div class="wrapper">
      <div class="grid" data-layout="halves"> ... </div> // grid with 2 columns
      <div class="grid" data-layout="thirds"> ... </div> // grid with 3 columns
      </div>
    </div>

from a “1/2, 1/2, 1/3, 1/3 ,1/3" layout.

But I don’t see how to handle this.

:light_bulb: What do you think of this project ? Do you have any suggestions for making solution #2 work, or (better), any clever CSS approaches to enhance the cube-boilerplate grid and allow rows with a different number of columns in a same grid ?