CMS controlled grid span for Collections Items

1 - Add this to your head in custom code.

‍<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

‍2 - Add an options field to collection items called span size, with the options of 1, 2, 3 or 4.

3 - Add a collection list to your page and make the collection list (not collection list wrapper) a grid and give it 4 columns.

4 - Create a paragraph element in your collection item and give it a class of ‘column-span-size’.

5 - Link that paragraph element so it gets text from the span size option field and change the display to none.

6 - Add this code to an embed element or in custom code settings.

<script>
$(document).ready(function(){ $('.collection-item').each(function() {
$(this).css('grid-column', 'span '+ $(this).children('.column-span-size').text().trim());
console.log("column span added");});  
});
</script>

Done.

Changes will only be visible on live website.

*Make sure that the 'column-span-size' paragraph element is always left as a direct child of the collection item*