Changing the design based on the number of CMS items

Design help General
1

Is there any way to change the design based on the number of CMS items?

This is what I’d like to achieve.

Sélection_397
Sélection_3971193×227 2.73 KB

Thanks!

2

If it’s always between 1-3 items, and always a 2x2 grid, it’s pretty straightforward.

Here’s a custom CSS approach.

  • Setup your collection list, limit to 3 items.
  • Set the collection list element ( middle one ) to a 2x2 grid.
  • Change the class name to grid, for this example
  • Do not span any cols or rows on the items in the designer, leave them all at the default 1x1, the CSS will do the rest

Drop an Embed element on the page with this CSS style;

<style>
/* 1 element = 2 x 2 */
.grid:has(:nth-child(1):nth-last-child(1)) > * {
  grid-column: span 2;
  grid-row: span 2;
}

/* 2 elements = 1 x 2 each */
.grid:has(:nth-child(2):nth-last-child(1)) > * {
  grid-column: span 1;
  grid-row: span 2;
}

/* 3 elements: 1 x 2 for first */
.grid:has(:nth-child(3):nth-last-child(1)) > * {
  grid-column: span 1;
  grid-row: span 1;
}
.grid:has(:nth-child(3):nth-last-child(1)) > :nth-child(1) {
  grid-column: span 1;
  grid-row: span 2;
}
</style>

The “magic” is in the selector construction, e.g.;

.grid:has(:nth-child(3):nth-last-child(1))

This applies only when “the 3rd child is the last child”, so we know we have 3 children exactly on this element.

3

Thanks for your answer Michael.
It didn’t work, as more than one selector applied to each item in the 3 items format.
I ended up using this code:

<script>
document.addEventListener("DOMContentLoaded", function () {
  const grid = document.querySelector('.clinics-grid');
  grid.classList.add(`layout-${grid.children.length}`);
});
</script>

And then used css to style the .layout-1,.layout-2 or .layout-3, like so:

<style>
  .layout-1 > *:nth-child(1) {
      grid-column: span 2 !important;
      grid-row: span 2 !important;
  }

  .layout-2 > *:nth-child(1) {
      grid-row: span 2 !important;
  }

  .layout-3 > *:nth-child(1) {
      grid-row: span 2 !important;
  }
</style>
4

Hi Fredo, I’m attempting to do something similar but with only two items in the CMS collection. Would you mind sharing the read-only of your website? Or explain in more detail how you got it to work? Which bits are your project-specific in the script? And how did you set up the ‘layout-1’ and ‘layout-2’ tags?
Thanks a lot and I look forward to hearing back from you!

5

Hey @adam_tarasewicz , in general the CSS approach is best, because it works in the designer as well.

Here’s a demo-

And some notes on the setup-

6

Hi Michael, thanks a lot for sending these across - they worked wonderfully! And indeed as noted in the notes, it is worth doing a simple media query with max-width and min-width to make it responsive. Thank you so much for you help across this forum!

1 Like
7

Sorry Adam, I didn’t see your message. I didn’t get a notification.

I take it Michael solved your problem?

1 Like
8

Yes Fredo, don’t worry - the solution from Michael worked all well! Thanks for following up:)