Looking for a solution to selecting a Palette based on Grid Position

Shaking The Habitual
2

That could be quite interesting. You would need to apply the different palette class names (e.g. palette1 etc) to each grid item. Could either do that manually in each grid item or via javascript - e.g. something like this in the ‘Body’ section of RW’s page code section.

<script>
const gridItems = document.querySelectorAll('.s-grid-item');

gridItems.forEach((item, index) => {
  if (index % 4 === 0) {
    item.classList.add('palette1');
  } else if (index % 4 === 1) {
    item.classList.add('palette2');
  } else if (index % 4 === 2) {
    item.classList.add('palette3');
  } else {
    item.classList.add('palette4');
  }
});
</script>

Note: this would do it for all grid items in all grids in a page so you would need to adapt the selector if you wanted it more targeted.

Edit: This is a perfect example of tapping into chatGPT. See here.

2 Likes