Set one of the instagram grid items to span 2 in a 3 column layout but it continues to render spanning 1

Finsweet Components Instagram Feed
1

I am trying to achieve a design layout where there are 3 columns and 2 rows, the first block is a title, and then the 3rd image in the second row spans 2. I currently have it looking correct in Webflow designer, but when I publish it still renders with all styling on .fs-instagramfeed_item to be the same, span 1, and the combo class and added css embed to try to override have not worked. Since the layout is similar to CMS, I am curious if it is impossible since item>applies to all?

I set grid-template-columns: repeat(3, 1fr) and grid-template-rows: auto auto; then tried manually moving the grid item (worked in designer but didnt render) and then also set .fs-instagramfeed_list > *:nth-child(4) {grid-row: span 2 !important;} All of this rendered it the same.

Would love to be able to figure this out!

2

Hey @asher!

You may need to apply this styling after the elements are rendered on the page. We can do this with the Instagram Feed API, which looks like this:


<!-- Finsweet Instagram Feed API -->
<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'instagramfeed',
    (instances) => {
      console.log({}, 'Finsweet Instagram Feed API instances', instances);

      //set your styling here
    },
  ]);
</script>

If you share a read-only link, I’ll give it a try!

3

Amazing thank you, Luis!

ideal layout:

Screenshot 2025-12-23 at 3.19.13 PM
Screenshot 2025-12-23 at 3.19.13 PM1092×712 177 KB

4

I have tried a bunch of different things, including your suggestion, but I cannot seem to override this default span 1 per item layout

Update: I was able to get it to show, but it is showing only part of the time

5

Hey @asher! Thank you for the update.

I have been testing some options, and I believe this will apply the styling reliably. I see you are currently using an embed block to run the API callback. Try moving it to the custom code section in the page’s settings.

Also, I modified the code you had to execute the applyCustomStyles() function after the solution has initialized correctly. I have tested this snippet with several connection speeds, and the style is properly applied on all connection speeds.

<!-- Finsweet Instagram Feed API -->
<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'instagramfeed',
    (instances) => {
      console.log('Finsweet Instagram Feed API instances', instances);

      instances.forEach((instance) => {
        // Function to apply our custom styling
        const applyCustomStyles = () => {
          if (instance.list && instance.list.children.length > 0) {
            console.log('Applying custom styles, children count:', instance.list.children.length);

            // Remove Finsweet's inline styles
            instance.list.style.display = '';
            instance.list.style.gridTemplateColumns = '';
            instance.list.style.gap = '';
            instance.list.style.width = '';

            // Only style the 4th child to span 2
            if (instance.list.children[3]) {
              instance.list.children[3].style.gridColumn = 'span 2';
              console.log('4th child styled');
            }
          } else {
            console.log('List not ready yet, retrying...');
            setTimeout(applyCustomStyles, 100);
          }
        };

        // Try after solution has successfully finished initializing, also adds a small delay
        instance.init().then(() => {
          setTimeout(applyCustomStyles, 100);
        });
      });
    },
  ]);
</script>

Give it a go if you’d like and let me know how it goes!